Display (Show) Footer Total in TextBox outside GridView in jQuery in ASP.Net

Hi akhter,

Always give valid ID to controls.

Refer below updated code.

HTML

<asp:GridView ID="gvSelected" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
    Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green"
    EmptyDataText="No Records Selected" ShowFooter="True">
    <Columns>
        <asp:BoundField ItemStyle-Width="0px" DataField="GRN_DID" HeaderText="ID" />
        <asp:BoundField ItemStyle-Width="0px" DataField="GRN_ID" HeaderText="GRN" />
        <asp:BoundField ItemStyle-Width="0px" DataField="It_ID" HeaderText="ITID" />
        <asp:BoundField ItemStyle-Width="100px" DataField="imp_ibn_no" HeaderText="IB No" />
        <asp:BoundField ItemStyle-Width="150px" DataField="imp_ibn_date" DataFormatString="{0:dd/MM/yyyy}"
            HeaderText="IB Date" />
        <asp:BoundField ItemStyle-Width="150px" DataField="It_Name" HeaderText="Name" />
        <asp:BoundField ItemStyle-Width="30px" DataField="grn_qty" HeaderText="QTY" />
        <asp:BoundField ItemStyle-Width="30px" DataField="Cont" HeaderText="Container" />
        <asp:TemplateField HeaderText="Rate">
            <ItemTemplate>
                <asp:TextBox ID="txtrate" runat="server" Width="50px" Text='<%#Eval("txtrate")%>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Amount">
            <ItemTemplate>
                <asp:Label ID="lbAmount" runat="server" Width="50px" Text='<%#Bind("lbtotal")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblAmountTotal" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Tax">
            <ItemTemplate>
                <asp:Label ID="Im_Tax" runat="server" Width="50px" Text='<%#Eval("Im_Tax")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lbTotal" runat="server" Width="50px" Text='<%#Bind("lbtotal2")%>'></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblGrandTotal" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<asp:TextBox ID="txtgtotal" runat="server"></asp:TextBox>
<script type="text/javascript">
    $(function () {
        $("[id*=txtrate]").val("0");
    });
    $("body").on("change keyup", "[id*=txtrate]", function () {
        //Check whether Quantity value is valid Float number.
        var rate = parseFloat($.trim($(this).val()));
        if (isNaN(rate)) {
            rate = 0;
        }

        //Update the Quantity TextBox.
        $(this).val(rate);

        //Calculate and update Row Total.
        var row = $(this).closest("tr");
        $("[id*=lbAmount]", row).html(parseFloat($("td", row).eq(7).html()) * parseFloat($(this).val()));

        //Calculate and update Grand Total.
        var grandTotal = 0;
        $("[id*=lbAmount]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=lblAmountTotal]").html(grandTotal.toString());

        //Calculate and update Row Total Last Coulmn.
        var row = $(this).closest("tr");
        $("[id*=lbAmount]", row).html(parseFloat($("td", row).eq(7).html()) * parseFloat($(this).val()));

        var amount = $("[id*=lbAmount]", row).html();
        var tax = $("[id*=Im_Tax]", row).html();
        $("[id*=lbTotal]", row).html(parseFloat(amount) * (parseFloat(tax)) / 100);
        //Calculate and update Grand Total.
        var grandTotal = 0;
        $("[id*=lbTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());
        $("[id*=txtgtotal]").val(grandTotal.toString());
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { 
                        new DataColumn("GRN_DID"),
                        new DataColumn("GRN_ID"),
                        new DataColumn("It_ID"),
                        new DataColumn("imp_ibn_no"),
                        new DataColumn("imp_ibn_date"),
                        new DataColumn("It_Name"),
                        new DataColumn("grn_qty"),
                        new DataColumn("Cont"),
                        new DataColumn("txtrate"),
                        new DataColumn("lbtotal"),
                        new DataColumn("Im_Tax"),
                        new DataColumn("lbtotal2"),});
        dt.Rows.Add(2070, 1047, 234234, 1, "11/07/2020", "Tyre", 333, 2, 22, 0, 13, 0);
        dt.Rows.Add(2071, 1048, 234234, 1, "11/07/2020", "Alcohol", 8901, 1, 11, 0, 13, 0);
        gvSelected.DataSource = dt;
        gvSelected.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 DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {
                New DataColumn("GRN_DID"), 
                New DataColumn("GRN_ID"), 
                New DataColumn("It_ID"), 
                New DataColumn("imp_ibn_no"), 
                New DataColumn("imp_ibn_date"), 
                New DataColumn("It_Name"), 
                New DataColumn("grn_qty"), 
                New DataColumn("Cont"), 
                New DataColumn("txtrate"), 
                New DataColumn("lbtotal"), 
                New DataColumn("Im_Tax"), 
    New DataColumn("lbtotal2")})
        dt.Rows.Add(2070, 1047, 234234, 1, "11/07/2020", "Tyre", 333, 2, 22, 0, 13, 0)
        dt.Rows.Add(2071, 1048, 234234, 1, "11/07/2020", "Alcohol", 8901, 1, 11, 0, 13, 0)
        gvSelected.DataSource = dt
        gvSelected.DataBind()
    End If
End Sub

Screenshot