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

Hi rajeesh,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
        $("[id*=txtQuantity]").on("change keyup", function () {
            //Check whether Quantity value is valid Float number.
            var quantity = parseFloat($.trim($(this).val()));
            if (isNaN(quantity)) {
                quantity = 0;
            }
            //Calculate and update Row Total.
            var row = $(this).closest("tr");
            $("[id*=lblTotal]", row).html(parseFloat($(row).find('td').eq(2).html()) * parseFloat(quantity));
            //Calculate and update Grand Total.
            var grandTotal = 0;
            $("[id*=lblTotal]").each(function () {
                grandTotal = grandTotal + parseFloat($(this).html());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    });
</script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowFooter="True">
    <Columns>
        <asp:BoundField DataField="itemname" HeaderText="Item Name" />
        <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:Image ID="Image3" runat="server" Height="50px" ImageUrl='<%# Eval("image") %>'
                    Width="50px" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="price" HeaderText="Price" />
        <asp:TemplateField HeaderText="Quantity">
            <FooterTemplate>
                <asp:Label ID="Label44" runat="server" Text="Sub Total"></asp:Label>
            </FooterTemplate>
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" runat="server" Height="30px" Text='<%# Eval("obqty") %>'
                    Width="40px"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

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("itemname", typeof(string)),
                        new System.Data.DataColumn("image", typeof(string)),
                        new System.Data.DataColumn("obqty", typeof(int)),
                        new System.Data.DataColumn("price", typeof(int))});
        dt.Rows.Add("Chrysanthemum", "~/Photo/Chrysanthemum.jpg", 10, 100);
        dt.Rows.Add("Desert", "~/Photo/Desert.jpg", 20, 100);
        dt.Rows.Add("Hydrangeas", "~/Photo/Hydrangeas.jpg", 30, 100);
        dt.Rows.Add("Jellyfish", "~/Photo/Jellyfish.jpg", 40, 100);
        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("itemname", GetType(String)), New System.Data.DataColumn("image", GetType(String)), New System.Data.DataColumn("obqty", GetType(Integer)), New System.Data.DataColumn("price", GetType(Integer))})
        dt.Rows.Add("Chrysanthemum", "~/Photo/Chrysanthemum.jpg", 10, 100)
        dt.Rows.Add("Desert", "~/Photo/Desert.jpg", 20, 100)
        dt.Rows.Add("Hydrangeas", "~/Photo/Hydrangeas.jpg", 30, 100)
        dt.Rows.Add("Jellyfish", "~/Photo/Jellyfish.jpg", 40, 100)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot