Ayman Ayman - 1 month ago 10
ASP.NET (C#) Question

Javascript sum grandtotal returning NaN error

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

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));
}
Comments