Running Total in GridView using jQuery in ASP.Net

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained how to calculate Row Total and Grand Total in GridView using jQuery in ASP.Net by using C#.

Code for HTML Page

On the HTML page I place the controls GridView with the ID named grid_view_things  to display data.In the gridview there will be two BoundField columns and two TemplateField columns. The TemplateField columns consist of an ItemTemplate.

One ItemTemplate consists of a TextBox and another ItemTemplate consists of a Label. There will be a label for displaying Grand Total.

<asp:GridView ID="grid_view_things" 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

On the  HTML page I will be inherited below mentioned jQuery file.

1. jquery.min.js

 

Inside the jQuery document ready event handler, all the quantity TextBoxes set with the value zero and assigned to an onchange and an onkeyup event handlers.

In the onchange and onkeyup event handlers of the Gridview, a check will be  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 the 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 need to import the following namespace.

C#

using System.Data;

 

Binding the GridView

Inside the Page_Load event handler, the Gridview is populated with dynamic DataTable.

 

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("Biscuits", 100);

    dt.Rows.Add("Cake", 450);

    dt.Rows.Add("Sweet Corn", 133.5);

    gvProducts.DataSource = dt;

    gvProducts.DataBind();

}

 

Conclusion: In above code, I have been explained about how to calculate Row Total and Grand Total in GridView using jQuery in ASP.Net by using C#. This code is very helpful for every developer. Bye and take care of you Developers. We will come back shortly with the new article.

Thanks and Regards

Programming Hub