Display sum of GridView Columns total in Label using jQuery in ASP.Net

Hi Naresh.rj,

Refer the below code.

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="Item">
                <ItemTemplate>
                    <asp:Label ID="lblItem" runat="server" Text='<%# Bind("Item") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle CssClass="item" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Price">
                <ItemTemplate>
                    <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle CssClass="price" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Quantity") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle CssClass="quantity" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" runat="server" Text='<%# Bind("Total") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle CssClass="total" />
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    Grand Total:
    <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
</div>
<div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var grandTotal = 0;
            $("[id*=lblTotal]").each(function () {
                grandTotal = grandTotal + parseFloat($(this).html());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Item"), new DataColumn("Price"), new DataColumn("Quantity"), new DataColumn("Total") });
        dt.Rows.Add("Item 1", "10", "20", "200");
        dt.Rows.Add("Item 2", "20", "8", "160");
        dt.Rows.Add("Item 3", "15", "10", "150");
        dt.Rows.Add("Item 4", "12", "5", "60");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Output

Grand Total: 570

It is not possible to check your complete code. I have modified my previous reply as per your gridview structure. Refer the below link.

http://www.aspforums.net/Threads/207781/Grand-total-of-a-Gridview-column-using-java-script/Replies/7#Replies

Naresh.rj says:

 <script type="text/javascript">

        $(function ()

        {

            $("[id*=GtxtSubject1]").val("0");

            $("[id*=GtxtSubject2]").val("0");

            $("[id*=GtxtSubject3]").val("0");

        });

        $(".calculate").live("keyup", function ()

        {

            var row = $(this).closest('tr');

            var Subject1 = $(row).find('[id*=GtxtSubject1]');

            var Subject2 = $(row).find('[id*=GtxtSubject2]');

            var Subject3 = $(row).find('[id*=GtxtSubject3]');

 

            if (!jQuery.trim($(Subject1).val()) == '' && !jQuery.trim($(Subject2).val()) == '' && !jQuery.trim($(Subject3).val()) == '')

            {

                if (!isNaN(parseFloat($(Subject1).val())) && !isNaN(parseFloat($(Subject2).val())) && !isNaN(parseFloat($(Subject2).val())))

                {

                    $("[id*=GtxtTotal]", row).html(parseFloat($(Subject1).val()) + parseFloat($(Subject2).val()) + parseFloat($(Subject2).val()));

                }

            }

            else

            {

                $(Subject1).val('');

                $(Subject2).val('');

                $(Subject2).val('');

            }

            var grandTotal = 0;

            $("[id*=GtxtTotal]").each(function ()

            {

                grandTotal = grandTotal + parseFloat($(this).html());

            });

            $("[id*=lblGrandTotal]").html(grandTotal.toString());

        });

    </script>

 Also you have to write the code inside ready function like below. You have written out side ready function.

<script type="text/javascript">
    $(function () {
        $("[id*=GtxtSubject1]").val("0");
        $("[id*=GtxtSubject2]").val("0");
        $("[id*=GtxtSubject3]").val("0");
        $(".calculate").live("keyup", function () {
            var row = $(this).closest('tr');
            var Subject1 = $(row).find('[id*=GtxtSubject1]');
            var Subject2 = $(row).find('[id*=GtxtSubject2]');
            var Subject3 = $(row).find('[id*=GtxtSubject3]');

            if (!jQuery.trim($(Subject1).val()) == '' && !jQuery.trim($(Subject2).val()) == '' && !jQuery.trim($(Subject3).val()) == '') {
                if (!isNaN(parseFloat($(Subject1).val())) && !isNaN(parseFloat($(Subject2).val())) && !isNaN(parseFloat($(Subject2).val()))) {
                    $("[id*=GtxtTotal]", row).html(parseFloat($(Subject1).val()) + parseFloat($(Subject2).val()) + parseFloat($(Subject2).val()));
                }
            }
            else {
                $(Subject1).val('');
                $(Subject2).val('');
                $(Subject2).val('');
            }
            var grandTotal = 0;
            $("[id*=GtxtTotal]").each(function () {
                grandTotal = grandTotal + parseFloat($(this).html());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    });           
</script>

Hi EVeryone,

Thankyou so much for helping me out and special thanks to Andrea and dharmendr for investing their time and effort to help me out.

i finally got the code to work by changing html to val in  the script.

this is my working code  once again thankyou so much.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SumGrid.aspx.cs" Inherits="SumGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>

  


        // WRITE THE VALIDATION SCRIPT IN THE HEAD TAG.
        function isNumber(evt) {
            var iKeyCode = (evt.which) ? evt.which : evt.keyCode
            if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
                return false;

            return true;
        }
        
        ///tiral by fire

       


</script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        
        $(".calculate").live("keyup", function ()
        {
            
            var row = $(this).closest('tr');
            var Subject1 = $(row).find('[id*=GtxtSubject1]');            
            var Subject2 = $(row).find('[id*=GtxtSubject2]');
            var Subject3 = $(row).find('[id*=GtxtSubject3]');
            

            if (!jQuery.trim($(Subject1).val()) == '' && !jQuery.trim($(Subject2).val()) == '' && !jQuery.trim($(Subject3).val()) == '')
            {
                if (!isNaN(parseFloat($(Subject1).val())) && !isNaN(parseFloat($(Subject2).val())) && !isNaN(parseFloat($(Subject2).val())))
                {
                    
                    $("[id*=GtxtTotal]", row).val(parseFloat($(Subject1).val()) + parseFloat($(Subject2).val()) + parseFloat($(Subject3).val()));
                    
                }
            }
            else
            {
                $(Subject1).val('');
                $(Subject2).val('');
                $(Subject2).val('');
            }
            var grandTotal = 0;
            $("[id*=GtxtTotal]").each(function ()
            {
                grandTotal = grandTotal + parseFloat($(this).val());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    </script>
    


</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                <asp:GridView ID="CalGrid" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true" ShowFooter="true">
                    <Columns>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:TextBox ID="GtxtID" runat="server" TextMode="Number"   ReadOnly="true" Text='<%#Eval("ID") %>'></asp:TextBox>
                            </ItemTemplate>
                            <FooterStyle HorizontalAlign="Right" />
                            <FooterTemplate>
                                <asp:Button ID="GbtnAdd" runat="server" Text="+" OnClick="GbtnAdd_Click" />
                            </FooterTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Subject 1">
                            <ItemTemplate>
                                <asp:TextBox ID="GtxtSubject1" CssClass="calculate" runat="server" onkeypress="calculate"    AutoPostBack="false" Text='<%#Eval("Subject1") %>'></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle CssClass="Subject1" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Subject 2">
                            <ItemTemplate>
                                <asp:TextBox ID="GtxtSubject2" CssClass="calculate" runat="server"  onkeypress="javascript:return isNumber(event)"  AutoPostBack="false" Text='<%#Eval("Subject2") %>'></asp:TextBox>
                            </ItemTemplate>
                           <ItemStyle CssClass="Subject2" />  
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Subject 3">
                            <ItemTemplate>
                                <asp:TextBox ID="GtxtSubject3" CssClass="calculate" runat="server"  onkeypress="javascript:return isNumber(event)"  AutoPostBack="false"  Text='<%#Eval("Subject3") %>'></asp:TextBox>
                            </ItemTemplate>
                           <ItemStyle CssClass="Subject3" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Total">
                            <ItemTemplate>
                                <asp:TextBox ID="GtxtTotal" runat="server" TextMode="Number"   ReadOnly="true"  ItemStyle-HorizontalAlign="Right"    Text='<%#Eval("Total") %>'></asp:TextBox>
                            </ItemTemplate> 
                                 <ItemStyle CssClass="total" />                       
                        </asp:TemplateField>
                        
                    </Columns>
                </asp:GridView>                                                                            
                Grand Total :
                <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
            </td>
        </tr>
       
    </table>
    </div>
        <div>
            <table>
                 <tr>
            <td>
                <asp:Label ID="GlblGtotal" runat="server" Text=""></asp:Label>
            </td>
        </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>