Javascript sum grandtotal returning NaN error

Question

I am using below JavaScript code to get row totals and grand total of gridview

but the issue is grand total which is $mult returns NaN

out put i get

Item Name    Unit Price    UOM    Quantity    Total Amount

item1        5.00          pcs      2          10.00

item2        10.00         pcs      3          30.00      

                                               NaN

JavaScript

<script>
    $(document).ready(function () {
        $(".txtMult input").on('keyup mouseup', multInputs);
        function multInputs() {
            var $mult = 0;
            $("tr.txtMult").each(function () {
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                var $total = (($UnitPrice) * ($Quantity));
                $mult += $total;

            });

            $("tr.txtMult").each(function () {
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                $('.multTotal', this).text(parseFloat($total).toFixed(3));
            });
            $(".lblGrandAmount").text(parseFloat($mult).toFixed(3));
        }
    });
</script>

Grid-view

<asp:GridView ID="griditem" OnRowDataBound="griditem_RowDataBound" CssClass="table" GridLines="None" runat="server" ShowFooter="True" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" Checked="true" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>

        <asp:BoundField DataField="ItemName" HeaderText="Item Name" SortExpression="Item Name" />
        <asp:TemplateField HeaderText="Unit Price" SortExpression="UnitPrice">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice"  TextMode="Number" step="any" Width="120" CssClass="form-control  UnitPrice" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="UOM" SortExpression="UOM" />

        <asp:TemplateField HeaderText="Quantity" SortExpression="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQty" Width="120" TextMode="Number" min="0" step="any" CssClass="form-control Quantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Total Amount">
            <ItemTemplate>
                <asp:Label ID="lbltotalamount" CssClass="multTotal" runat="server"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblgrandamount" CssClass="lblGrandAmount" runat="server"></asp:Label>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ItemID" HeaderText="ItemID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" SortExpression="ItemID" />

    </Columns>
</asp:GridView>

What could be the issue that makes this error occur?

Answer 1

All trs have the class txtMult, so you need to exclude header tr and grand total tr from the calculation. You can use :gt(0) and :lt(-1) for this like following.

$(".txtMult input").on('keyup mouseup', multInputs);

function multInputs() {
    var $mult = 0;

    $("tr.txtMult:gt(0):lt(-1)").each(function () {
        var $UnitPrice = $('.UnitPrice', this).val();
        var $Quantity = $('.Quantity', this).val();
        var $total = $UnitPrice * $Quantity;
        $mult += $total;

        $('.multTotal', this).text($total.toFixed(2));
    });

    $(".lblGrandAmount").text($mult.toFixed(2));
}