I have a gridview with following data
ProductID
|
Product Name
|
Price
|
Qty
|
Unit
|
Sub Total
|
VAT %
|
VAT Amount
|
Total
|
1
|
Abc
|
225.40
|
1000
|
1
|
225.40
|
15
|
33.81
|
259.21
|
2
|
Sky
|
325.14
|
1000
|
1
|
325.14
|
12
|
39.02
|
364.16
|
3
|
Xyz
|
350.00
|
1000
|
1
|
350.00
|
14
|
49.00
|
399.00
|
Requirements:
I want to calculate
Total Price = Sub Total + VAT % with Amount in each row.
and here is code
<%@ Page Title="Working Invoices" Language="C#" MasterPageFile="~/Inventory.master"
AutoEventWireup="true" CodeFile="frmInvoices.aspx.cs" Inherits="frmInvoices" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
Calculation Process:
When I display data in GridView, then VAT % value 15 will be displayed auto inside GridView row item template.
When I enter unit 1 SubTotal will be Price * Unit = 225.40 then VAT 15% of 225.40 will be calculated and will be show in next column 33.81 and Finally Total Price = Sub Total + VAT Amount in each row will be displayed.
ProductID
|
Product Name
|
Price
|
Qty
|
Unit
|
Sub Total
|
VAT %
|
VAT Amount
|
Total
|
1
|
Abc
|
225.40
|
1000
|
1
|
225.40
|
15
|
33.81
|
259.21
|
2
|
Sky
|
325.14
|
1000
|
1
|
325.14
|
12
|
39.02
|
364.16
|
3
|
Xyz
|
350.00
|
1000
|
1
|
350.00
|
14
|
49.00
|
399.00
|
SubTotal : 900.54
VAT Amount : 121.83
Grand Total: 1022.37
I have a gridview with following data
ProductID
|
Product Name
|
Price
|
Qty
|
Unit
|
Sub Total
|
VAT %
|
VAT Amount
|
Total
|
1
|
Abc
|
225.40
|
1000
|
1
|
225.40
|
15
|
33.81
|
259.21
|
2
|
Sky
|
325.14
|
1000
|
1
|
325.14
|
12
|
39.02
|
364.16
|
3
|
Xyz
|
350.00
|
1000
|
1
|
350.00
|
14
|
49.00
|
399.00
|
Requirements:
I want to calculate
Total Price = Sub Total + VAT % with Amount in each row.
and here is code
<%@ Page Title="Working Invoices" Language="C#" MasterPageFile="~/Inventory.master"
AutoEventWireup="true" CodeFile="frmInvoices.aspx.cs" Inherits="frmInvoices" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtQuantity]").val("0");
});
$("body").on("change keyup", "[id*=txtQuantity]", function () {
//Check whether Quantity value is valid Float number.
var quantity = parseFloat($.trim($(this).val()));
if (isNaN(quantity)) {
quantity = 0;
}
//Update the Quantity TextBox.
$(this).val(quantity);
//Calculate and update Row Total.
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
var vat = $("[id*=txtVAT]").val();
if (isNaN(vat)) {
$(vat).val('0');
}
var totalWithVat = grandTotal + (grandTotal * (vat / 100));
var VatAmt = grandTotal * (vat / 100);
$('[id*=txtSum]').val(VatAmt);
$("[id*=lblGrandTotal]").html(grandTotal.toString());
$('[id*=txtPay]').val(totalWithVat);
$("[id*=hdnfldTotal]").val(grandTotal);
});
</script>
<div class="content-wrapper" style="background-color: blue;">
<div class="content">
<div class="connectedSortable" style="margin-left: 10px;">
<div class="col-sm-1">
</div>
<div class="col-sm-12">
<div class="modal-content">
<div class="modal-header" style="background-color: #4682B4; color: #fff">
<strong><span class="fa fa-signal"></span> Available Services</strong>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Invoice No.</label>
<asp:TextBox ID="txtInvoice" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Date</label>
<asp:TextBox ID="txtDate" runat="server" class="form-control" placeholder="Service Date"
BorderColor="Bisque"></asp:TextBox><br />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate"
PopupButtonID="txtDate" Format="yyyy-MM-dd"></asp:CalendarExtender>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Customer Name</label>
<asp:TextBox ID="txtCName" Text="Customer" runat="server" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Phone No.</label>
<asp:TextBox ID="txtPhone" Text="0507530530" runat="server" class="form-control"
BorderColor="Bisque"></asp:TextBox>
<br />
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Tax VAT (%)</label>
<asp:TextBox ID="txtVAT" runat="server" class="form-control" Font-Size="Large" Font-Bold="true"
Text="15"></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
VAT Amount</label>
<asp:TextBox ID="txtSum" runat="server" class="form-control" Font-Size="Large" Font-Bold="true"
placeholder="0" ></asp:TextBox>
</div>
<div class="col-sm-3">
<label class="control-label" style="margin-top: 10px;">
Total Amount</label>
<asp:TextBox ID="txtPay" runat="server" Font-Size="Large" Font-Bold="true" class="form-control" BorderColor="Bisque"></asp:TextBox>
</div>
<hr style="visibility: hidden;" />
<asp:PlaceHolder ID="plBarCode" runat="server" />
</div>
</div>
<div class="row">
<div class="col-sm-4 ">
<asp:LinkButton ID="btnShow" runat="server" Class="btn btn-success" OnClick="btnShow_Click">
<span aria-hidden="true" class="fa fa-print"></span> Save </asp:LinkButton>
</div>
<div class="col-sm-4 ">
<div class="container-fluid" style="background-color: #4682B4; color: #fff; height: 40px;
text-align: center;">
<h4>
<label class="control-label" style="margin-top: -10px;">
Untaxed Amount:</label>
<asp:Label ID="lblGrandTotal" runat="server" Text="0" class="control-label" Style="margin-top: 10px;
color: White; font-size: large; font-weight: bolder; font-style: italic;"></asp:Label>
</h4>
<asp:HiddenField ID="hdnfldTotal" runat="server" />
</div>
</div>
<div class="col-sm-4 ">
</div>
<br />
<br />
</div>
<div class="row">
<div class="col-sm-12 ">
<br />
<div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" AllowPaging="false" Class="table table-striped table-bordered table-hover"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service ID" ItemStyle-Width="150">
<ItemTemplate>
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("BrandID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="200px" DataField="BrandName" HeaderText="Service Name" />
<asp:BoundField ItemStyle-Width="150px" DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
<asp:BoundField ItemStyle-Width="200px" DataField="Qty" HeaderText="Available Qty" />
<asp:TemplateField>
<HeaderTemplate>
Unit</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Text="0" class="field1 form-control"
Width="100"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sub Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0" Width="100"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
VAT (%)</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtVT" runat="server" Text="15" class="form-control"
Width="100"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
VAT Amount</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtVTAmt" runat="server" Text="0" class="form-control"
Width="100"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total Price">
<ItemTemplate>
<asp:Label ID="lblTotalss" runat="server" Text="0" Width="100"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
Calculation Process :
When I display data in Gridview, then VAT % value 15 will be displayed auto inside Gridview row item template.
When I enter unit 1 SubTotal will be Price * Unit = 225.40 then VAT 15% of 225.40 will be calculated and will be show in next column 33.81 and Finally Total Price = Sub Total + VAT Amount in each row will be displayed.
ProductID
|
Product Name
|
Price
|
Qty
|
Unit
|
Sub Total
|
VAT %
|
VAT Amount
|
Total
|
1
|
Abc
|
225.40
|
1000
|
1
|
225.40
|
15
|
33.81
|
259.21
|
2
|
Sky
|
325.14
|
1000
|
1
|
325.14
|
12
|
39.02
|
364.16
|
3
|
Xyz
|
350.00
|
1000
|
1
|
350.00
|
14
|
49.00
|
399.00
|
SubTotal : 900.54
VAT Amount : 121.83
Grand Total: 1022.37