Calculate Sum (Total) of Checked ASP.Net GridView Rows using jQuery

Last Reply 4 months ago By pandeyism

Posted 4 months ago

I want sum of selected checkbox in gridview but it is giving me error.

    <script type="text/javascript">
        $(function () {
            $('input:checkbox').click(function (e) {
                calculateSum(4); // sum of 4th column
            });

            function calculateSum(CheckBox1) {
                total = 0.0;
                $("tr:has(:checkbox:checked) td:nth-child(" + CheckBox1 + ")").each(function () {
                    total += parseFloat($(this).text());
                });

                $('#tot').text("Your Total Amount Is: " + total.toFixed(2));
            }
        });
    </script>
    <asp:GridView ID="GridView1" runat="server" BackColor="SlateGray" BorderColor="Gray"  BorderStyle="None"  CellPadding="4"
        AutoGenerateColumns="False" DataKeyNames="Id"   Font-Size="X-Large"  CssClass="mydatagrid" PagerStyle-CssClass="pager"   
        HeaderStyle-CssClass="header" RowStyle-CssClass="rows"  Width="100%">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" Visible="false" ReadOnly="True" SortExpression="Id" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" >
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                </asp:BoundField>
                <asp:BoundField DataField="Name" Visible="false" HeaderText="Name" SortExpression="Name" >
                 <HeaderStyle HorizontalAlign="Center" />
                 <ItemStyle HorizontalAlign="Center" />
                 </asp:BoundField>
                <asp:BoundField DataField="Status" Visible="false" HeaderText="Name" SortExpression="Name" >
                 <HeaderStyle HorizontalAlign="Center" />
                 <ItemStyle HorizontalAlign="Center" />
                 </asp:BoundField>
                 <asp:BoundField DataField="Raw_M" HeaderText="Raw Material" SortExpression="Quantity" >
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>

            <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" >
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
           
           <asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Quantity" >
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
           <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" >
         
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
         
                <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" >
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
          <asp:BoundField DataField="District" HeaderText="District" SortExpression="District" >
                 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
          <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" >
           <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                 </asp:BoundField>
                 <asp:BoundField DataField="Password" Visible="false" HeaderText="Password" SortExpression="Address" >
           <HeaderStyle HorizontalAlign="Center" />
                 <ItemStyle HorizontalAlign="Center" />
                 </asp:BoundField>
          
                 <asp:BoundField DataField="Role" Visible="false" HeaderText="Role" SortExpression="Address" >
           <HeaderStyle HorizontalAlign="Center" />
                 <ItemStyle HorizontalAlign="Center" />
                 </asp:BoundField>          
               <asp:TemplateField HeaderText="Accept">
                                <ItemTemplate>
                                    <center>
                                    <a href="?id=<%#Eval("id") %>">
                                        <asp:CheckBox ID="CheckBox1" runat="server"  Width="50px"></asp:CheckBox>
                                     </center>
                             </ItemTemplate>
                            </asp:TemplateField>
                          
                </Columns>
            <HeaderStyle BackColor="DimGray" Font-Bold="True" ForeColor="#FFFFCC" Height="70px" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <RowStyle BackColor="White" ForeColor="#330099" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <SortedAscendingCellStyle BackColor="#FEFCEB" />
            <SortedAscendingHeaderStyle BackColor="#AF0101" />
            <SortedDescendingCellStyle BackColor="#F6F0C0" />
            <SortedDescendingHeaderStyle BackColor="#7E0000" />
        </asp:GridView>
        <asp:Label ID="lblRecord" runat="server" CssClass="bg-primary" />  
        <asp:Button ID="btnEdit" runat="server" class="btn btn-primary" Width="100px" Font-Size="20px" Text="Add" CommandName="EditButton" OnClick="btnEdit_Click" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" />

 

You are viewing reply posted by: pandeyism 4 months ago.
Posted 4 months ago

Hi VinitaAkha,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=chk]').on('change', function () {
            var value = 0;
            $('[id*=chk]:checked').each(function () {
                var row = $(this).closest('tr');
                value = value + parseInt(row.find('[id*=lblValue]').html());
            });
            $("[id*=gvData] [id*=lblGrandTotal]").html(value);
        });
    });
</script>
<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="false" ShowFooter="true">
    <Columns>
        <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Values">
            <ItemTemplate>
                <asp:Label ID="lblItems" runat="server" Text='<%# Eval("Items") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Values">
            <ItemTemplate>
                <asp:Label ID="lblValue" runat="server" Text='<%# Eval("Price") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                Total :
                <asp:Label ID="lblGrandTotal" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Items", typeof(string)), new DataColumn("Price", typeof(int)) });
        dt.Rows.Add("opisometer.", 10);
        dt.Rows.Add("dividers", 20);
        dt.Rows.Add("protractor", 30);
        dt.Rows.Add("compass", 40);
        dt.Rows.Add("ellipsograph", 60);
        gvData.DataSource = dt;
        gvData.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)Handle Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Items", GetType(String)), New DataColumn("Price", GetType(Integer))})
        dt.Rows.Add("opisometer.", 10)
        dt.Rows.Add("dividers", 20)
        dt.Rows.Add("protractor", 30)
        dt.Rows.Add("compass", 40)
        dt.Rows.Add("ellipsograph", 60)
        gvData.DataSource = dt
        gvData.DataBind()
    End If
End Sub

Screenshot