Display ASP.Net GridView row total in Footer using jQuery

Last Reply 3 months ago By Warren

Posted 3 months ago

I am trying to dynamically update my amount column total, but nothing happnes when I run this: (I think I am getting NaN)

        <asp:GridView ID="gvtfaLoan" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" ShowFooter="True" AllowSorting="False" OnRowDataBound="gvtfaLoan_RowDataBound" CssClass="table table-striped table-bordered table-hover" Width="98%" HorizontalAlign="Center">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="0. ID" ShowHeader="false" HeaderStyle-Wrap="false" SortExpression="ID"/>
                <asp:BoundField DataField="CheckDate" HeaderText="1. Check Date" ShowHeader="false" HeaderStyle-Wrap="false" DataFormatString="{0:dd, MMM yyyy}" SortExpression="CheckDate"/>
                <asp:BoundField DataField="BorrowerName" HeaderText="2. Borrower Name" ShowHeader="false" HeaderStyle-Wrap="false" SortExpression="BorrowerName" />
                <asp:BoundField DataField="CheckNo" HeaderText="3. CheckNo" ShowHeader="false" HeaderStyle-Wrap="false" SortExpression="CheckNo" />                
                <asp:TemplateField HeaderText="4. Check Memo" SortExpression="CheckMemo">
                    <ItemTemplate>
                        <asp:Label ID="LabelCheckMemo" runat="server" Text='<%# Eval("CheckMemo") %>' visible="false"></asp:Label>
                        <asp:TextBox ID="TextCheckMemo" runat="server" Text='<%# Eval("CheckMemo") %>' Visible="false" CssClass="form-control UpdateLoan"  MaxLength="30"></asp:TextBox>
                    </ItemTemplate>
                    <HeaderStyle Wrap="False" />
                </asp:TemplateField>                
                <asp:BoundField DataField="LoanCode" HeaderText="5. Loan Code" ShowHeader="false" HeaderStyle-Wrap="false" SortExpression="LoanCode" />
                <asp:TemplateField HeaderText="6. GL Account" HeaderStyle-HorizontalAlign="Left" SortExpression="GLAcct">
                    <ItemTemplate>
                        <asp:Label ID="LabelGLAcct" runat="server" Text='<%# Eval("GLAcct") %>' Visible="false"></asp:Label>
                        <asp:DropDownList ID="DropdownlistGLAcct" runat="server" Visible="false" CssClass="form-control UpdateLoan" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" Wrap="false" />
                </asp:TemplateField>
               
                <asp:TemplateField HeaderText="7. Amount" HeaderStyle-HorizontalAlign="Right" SortExpression="Amount">
                    <ItemTemplate>
                        <asp:Label ID="LabelAmount" runat="server" Text='<%# String.Format("$ {0:#,##0.00}", Eval("Amount")) %>' visible="false"></asp:Label>
                        <asp:TextBox ID="TextAmount" runat="server" Text='<%# Eval("Amount") %>' Visible="false" style="text-align: right" readonly="true" CssClass="currencyMask form-control UpdateLoan"></asp:TextBox>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Label ID="txtTotal" runat="server" CssClass="sum"></asp:Label>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField Visible="false">
                    <ItemTemplate>
                        <asp:LinkButton ID="btnDelete" runat="server" Text="Delete" OnClick="DeleteLoan"/>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Code behind:

    <script language="javascript" type="text/javascript">
        var grandTotal = 0;
        $("[id*=TextAmount]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=txtTotal]").html(grandTotal.toString());
    </script>

 

You are viewing reply posted by: Warren 3 months ago.
Posted 3 months ago

I was able to resolve my issue with the following javascript:

(I needed to dynamically update the total on the fly as well as have the total calculated when the second nested gridview was opened)

    <script type="text/javascript">
        $(function () {
                var grandTotal = 0;
                $('#gvtfaLoan').find('tr:has(td)').each(function (i) {
                    if (i < $('[id$=gvtfaLoan]').find('tr:has(td)').length - 1) {
                        grandTotal += parseFloat($(this).find('[id*=TextAmount]').val());
                    }
                });
                //$("[id*=txtDelete]").html("$" + grandTotal.toFixed(2));
                $("[id*=txtTotal]").html("$" + grandTotal.toFixed(2));
            });

        $(function () {
            $("body").on("change keyup", "[id*=TextAmount]", function () {
                var grandTotal = 0;
                $('#gvtfaLoan').find('tr:has(td)').each(function (i) {
                    if (i < $('[id$=gvtfaLoan]').find('tr:has(td)').length - 1) {
                        grandTotal += parseFloat($(this).find('[id*=TextAmount]').val());
                    }
                });
                $("[id*=txtTotal]").html("$" + grandTotal.toFixed(2));
            });
        });
    </script>