Multiply GridView column and display Grand Total in footer using jQuery in ASP.Net

Hi Sadia.net,

Refer below code.

HTML

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="False" ShowFooter="True">
    <Columns>
        <asp:TemplateField HeaderText="Item">
            <ItemTemplate>
                <asp:Label ID="Item" runat="server" Text='<%#Bind("Item")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Rate">
            <ItemTemplate>
                <asp:Label ID="Rate" runat="server" Text='<%#Bind("Rate")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="QTY">
            <ItemTemplate>
                <asp:Label ID="Qty" runat="server" Text='<%#Bind("Qty")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lbTotal" runat="server" Text='<%#Bind("lbTotal") %>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblGrandTotal" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:CommandField ButtonType="Button" ShowDeleteButton="True" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function () {
        $("[id*=Rate]").val("0");
        var total = 0;
        $.each($('[id*=GridView1] tr:has(td)'), function () {
            var rate = $(this).find('[id*=Rate]').html();
            var qty = $(this).find('[id*=Qty]').html();
            if (rate == undefined) {
                rate = 0;
            }
            if (qty == undefined) {
                qty = 0;
            }
            $(this).find('[id*=lbTotal]').html(parseFloat(rate) * parseFloat(qty));
            total += parseFloat(rate) * parseFloat(qty);
        });
        $('[id*=lblGrandTotal]').html(total);
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] {
            new System.Data.DataColumn("Item"), new System.Data.DataColumn("Rate"),
            new System.Data.DataColumn("Qty"),new System.Data.DataColumn("lbTotal") });
        dt.Rows.Add("Mango", 10, 5, 0);
        dt.Rows.Add("Apple", 10, 4, 0);
        dt.Rows.Add("Banana", 10, 8, 0);
        dt.Rows.Add("Orange", 10, 6, 0);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("Item"), New System.Data.DataColumn("Rate"), New System.Data.DataColumn("Qty"), New System.Data.DataColumn("lbTotal")})
        dt.Rows.Add("Mango", 10, 5, 0)
        dt.Rows.Add("Apple", 10, 4, 0)
        dt.Rows.Add("Banana", 10, 8, 0)
        dt.Rows.Add("Orange", 10, 6, 0)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub