In this article I will explain with an example, how to calculate Row Total and Grand Total in GridView using jQuery in ASP.Net with C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of following controls:
GridView – For displaying data.

Columns

The GridView consists of two BoundField columns and two TemplateField columns.
TemplateField – The TemplateField columns consist of an ItemTemplate.
ItemTemplate – One ItemTemplate consists of a TextBox and another ItemTemplate consists of a Label.
 
Label – For displaying Grand Total.
<asp:GridView ID="gvProducts" 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>
 
 

Calculating Row Total and Grand Total using jQuery

Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
 
Inside the jQuery document ready event handler, all the quantity TextBoxes has been set with value zero and assigned with onchange and onkeyup event handlers.
Inside the onchange and onkeyup event handlers, a check is performed if the value is not a number then, it is set to 0.
Then, it multiplies with the Price column value to get Row Total which is displayed in the Label control.
Next, a FOR EACH loop is executed over Total Label control and Grand Total is calculated.
Finally, the Grand Total is set in Label control.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Binding the GridView

Inside the Page_Load event handler, the Gridview is populated with dynamic DataTable.
Note: For more details on how to use dynamic DataTable, please refer my article Dynamically create DataTable and bind to GridView in ASP.Net.
 
C# 
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);
    gvProducts.DataSource = dt;
    gvProducts.DataBind();
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(1) {
                        New DataColumn("Item"),
                        New DataColumn("Price")})
    dt.Rows.Add("Shirt", 200)
    dt.Rows.Add("Football", 30)
    dt.Rows.Add("Bat", 22.5)
    gvProducts.DataSource = dt
    gvProducts.DataBind()
End Sub
 
 

Screenshot

Calculate Row Total and Grand Total in ASP.Net GridView using jQuery
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code