Display sum of GridView column total in TextBox outside using jQuery in ASP.Net

Hi akhter,

Refer below code.

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID="GVFood" runat="server" AutoGenerateColumns="false" auttopostback="true" ShowFooter="True">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <%#Container.DataItemIndex+1 %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="B_ID" HeaderText="Codeitem" Visible="false" />
                <asp:BoundField DataField="B_Name" HeaderText="Descriptionitem" ReadOnly="true" />
                <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="QTY" Text='<%#Eval("B_QTY") %>' Enabled="false" runat="server" ControlStyle-Width="50px"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Price">
                    <ItemTemplate>
                        <asp:TextBox ID="Rate" runat="server" onkeyup="CalculateTotal();CalculateGrandTotal();" Width="50px" Text='<%#Eval("Rate") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Total">
                    <ItemTemplate>
                        <asp:Label ID="lblProductTotal" runat="server"
                            Text='<%# ((Convert.ToInt32(Eval("B_QTY")))*(Convert.ToInt32(Eval("Rate"))))%>'>
                        </asp:Label>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Label ID="lblTotal1" runat="server"></asp:Label>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:CommandField ShowDeleteButton="True" ButtonType="Link" />
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
    </Triggers>
</asp:UpdatePanel>
<br />
Grand Total : <asp:TextBox ID="txtTotal" runat="server"></asp:TextBox>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function CalculateTotal() {
        var gv = document.getElementById("<%= GVFood.ClientID%>");
        var tb = gv.getElementsByTagName("input");
        var lb = gv.getElementsByTagName("span");
        var sub = 0;
        var total = 0;

        var indexp = 0;
        var indexq = 1;
        var price = 0;
        var qty = 0;
        var totalqty = 0;
        var tbcount = tb.length / 2;
        for (var i = 0; i < tbcount; i++) {
            if (tb[i].type = "text") {
                sub = parseFloat(tb[i + indexp].value) * parseFloat(tb[i + indexq].value);
                if (isNaN(sub)) {
                    lb[i].innerHTML = "0.0";
                    sub = 0;
                }
                else {
                    lb[i].innerHTML = sub;
                }
                if (isNaN(tb[i + indexp].value) || tb[i + indexq].value == "") {
                    qty = 0;
                }
                else {
                    qty = tb[i + indexq].value;

                }
                totalqty = totalqty + parseInt(qty);
                total = total + parseFloat(sub);
            }
            indexp++;
            indexq++;

        }
        lb[tbcount].innerHTML = "Total Quantity " + totalqty;
        lb[tbcount + 1].innerHTML = "Grand Total " + total;                 
    }

    $(function () {
        CalculateTotal();
        //Calculate and update Grand Total.
        CalculateGrandTotal();
    });

    function CalculateGrandTotal() {
        var grandTotal = 0;
        $("[id*=lblProductTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=txtTotal]").val(grandTotal.toString());
    }
</script>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("B_ID"),
            new DataColumn("B_Name"),
            new DataColumn("B_QTY"),
            new DataColumn("Rate")
        });
        dt.Rows.Add(1, "12 liter", "2", 60);
        dt.Rows.Add(2, "19 liter", "2", 30);
        GVFood.DataSource = dt;
        GVFood.DataBind();
    }
}

Screenshot