In this article I will explain with an example, how to calculate Running Total using jQuery in ASP.Net GridView.
The each GridView Row contains a Quantity TextBox which is assigned OnChange and OnKeyUp event handlers and there’s a Label for displaying Running Total in GridView Row and a Label below GridView for Grand Total.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns and two TemplateField columns.
The first TemplateField column consists of a TextBox for entering Quantity while the second TemplateField column consists of a Label for displaying Row Total.
Below the GridView, there’s a Label for displaying the Grand Total.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
 
 
Namespaces
You will need to import the following namespace.
using System.Data;
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
    dt.Rows.Add("Shirt", 200);
    dt.Rows.Add("Football", 30);
    dt.Rows.Add("Bat", 22.5);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
 
 
Calculate Running Total using jQuery
Inside the jQuery document ready event handler, all the Quantity TextBoxes in GridView are assigned value zero.
Then each Quantity TextBox in GridView is assigned OnChange and OnKeyUp event handlers.
Inside the OnChange and OnKeyUp event handlers, first the value is checked for valid Float number and if it is valid Float number it is multiple with the Price column value to get Row Total which is later displayed in the Total Label in the respective GridView Row.
Then a loop is executed over all the Total Labels in GridView and the Grand Total is calculated which is later displayed in the Grand Total Label.
<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());
        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());
    });
</script>
 
 
Screenshot
Calculate Running Total in ASP.Net GridView using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code