Calculate ASP.Net GridView row total on Plus Minus Button Click using jQuery

Hi Nanthan,

Check this example. Now please take its reference and correct your code.

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:Button ID="btn1" runat="server" Text=" - " CssClass="Minus" />
                <asp:TextBox ID="txtQuantity" runat="server" Width="50"></asp:TextBox>
                <asp:Button ID="btn2" runat="server" Text=" + " CssClass="Plus" />
            </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://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
        $('[id*=btn1], [id*=btn2]').on('click', function () {
            var value = 0;
            if ($(this).attr('class') == 'Minus') {
                value = parseInt($(this).closest('tr').find('[id*=txtQuantity]').val()) - 1;
            }
            if ($(this).attr('class') == 'Plus') {
                value = parseInt($(this).closest('tr').find('[id*=txtQuantity]').val()) + 1;
            }
            if (value < 0) {
                value = 0;
            }
            $(this).closest('tr').find('[id*=txtQuantity]').val(value);
            CalculateTotal($(this).closest('tr').find('[id*=txtQuantity]'));
            return false;
        });
    });
    $("body").on("change keyup", "[id*=txtQuantity]", function () {
        CalculateTotal($(this));
    });

    function CalculateTotal(ele) {
        //Check whether Quantity value is valid Float number.
        var quantity = parseFloat($.trim($(ele).val()));
        if (isNaN(quantity)) {
            quantity = 0;
        }

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

        //Calculate and update Row Total.
        var row = $(ele).closest("tr");
        $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(ele).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)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] {
            new System.Data.DataColumn("Item"),
            new System.Data.DataColumn("Price") });
        dt.Rows.Add("Item 1", "100");
        dt.Rows.Add("Item 2", "200");
        dt.Rows.Add("Item 3", "300");
        dt.Rows.Add("Item 4", "400");
        GridView1.DataSource = dt;
        GridView1.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 Data.DataTable = New Data.DataTable()
        dt.Columns.AddRange(New Data.DataColumn() {
                            New Data.DataColumn("Item"),
                            New Data.DataColumn("Price")})
        dt.Rows.Add("Item 1", "100")
        dt.Rows.Add("Item 2", "200")
        dt.Rows.Add("Item 3", "300")
        dt.Rows.Add("Item 4", "400")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot