[Solved] Multiply two ASP.Net GridView columns using jQuery returns NAN

Hi aakhan314,

You need to fetch the value from the price TextBox and then use that value to calculate the total.

Also remember the TextBox value will be fetched using val instead of html.

Please refer the sample code.

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtPrice" runat="server" Text='<%#Eval("Price") %>' CssClass="price"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
    });
    $("body").on("change keyup", "[id*=txtQuantity]", function () {
        //Check whether Quantity value is valid Float number. 
        var quantity = parseFloat($.trim($(this).val()));
        if (isNaN(quantity)) {
            quantity = 0;
        }

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

        //Calculate and update Row Total.
        var row = $(this).closest("tr");
        var price = parseFloat($(".price", row).val());
        if (isNaN(price)) {
            price = 0;
        }
        $("[id*=lblTotal]", row).html(price * parseFloat($(this).val()));

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

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.AddRange(new System.Data.DataColumn[2] {
        new System.Data.DataColumn("Item"),
        new System.Data.DataColumn("Price")
    });
    dt.Rows.Add("Shirt", 200);
    dt.Rows.Add("Football", 30);
    dt.Rows.Add("Bat", 22.5);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim dt As System.Data.DataTable = New Data.DataTable()
    dt.Columns.AddRange(New Data.DataColumn(1) {
                        New Data.DataColumn("Item"),
                        New Data.DataColumn("Price")})
    dt.Rows.Add("Shirt", 200)
    dt.Rows.Add("Football", 30)
    dt.Rows.Add("Bat", 22.5)
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Screenshot