CODEWITHSUNDEEP
javascriptjqueryasp.netgridview
user5109118
user5109118

Reputation: 15

Calculate Row Total and Grand Total in gridview using jquery

Hi in below JavaScript code the multiplication is betweentxtQuantity which is textbox TemplateField in grid view and price which is BoundField in grid view.

My issue is my grid view have both txtQuantity and txtPrice as TemplateFieldes

<ItemTemplate><asp:TextBox ID="txtprice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></ItemTemplate>

<ItemTemplate><asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox></ItemTemplate>

i have tried to modify the java-script code 

 $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtprice]", row).html()) * parseFloat($(this).val()));

but it give me NaNas result of multiplication

Original js code

<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
    });
    $("[id*=txtQuantity]").live("change", function () {
        if (isNaN(parseInt($(this).val()))) {
            $(this).val('0');
        } else {
            $(this).val(parseInt($(this).val()).toString());
        }
    });
    $("[id*=txtQuantity]").live("keyup", function () {
        if (!jQuery.trim($(this).val()) == '') {
            if (!isNaN(parseFloat($(this).val()))) {
                var row = $(this).closest("tr");
                $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
            }
        } else {
            $(this).val('');
        }
        var grandTotal = 0;
        $("[id*=lblTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());
    });
</script>

Upvotes: 0

Views: 3232

Answers (1)

Racil Hilan
Racil Hilan

Reputation: 25351

There are some minor issues with your code, try this:

$(function () {
   $("[id*=txtQuantity").val("0");
});
$(document).on("change", "[id*=txtQuantity]", function () {
  if (isNaN(parseInt($(this).val()))) {
    $(this).val('0');
  } else {
    $(this).val(parseInt($(this).val()).toString());
  }
});
$(document).on("keyup mouseup", "[id*=txtQuantity]", function () {
  if (!jQuery.trim($(this).val()) == '') {
    if (!isNaN(parseFloat($(this).val()))) {
      var row = $(this).closest("tr");
      $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtPrice]", row).val()) * parseFloat($(this).val()));
    }
  } else {
    $(this).val('');
  }
  var grandTotal = 0;
  $("[id*=lblTotal]").each(function () {
    var value = $(this).html();
    if(value != "")
      grandTotal = grandTotal + parseFloat(value);
  });
  $("[id*=lblGrandTotal]").html(grandTotal.toString());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="5">
  <tr>
    <td><input type="text" id="txtPrice1" value="100" /></td>
    <td><input type="text" id="txtQuantity1" value="1" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
  <tr>
    <td><input type="text" id="txtPrice2" value="200" /></td>
    <td><input type="text" id="txtQuantity2" value="2" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
  <tr>
    <td><input type="text" id="txtPrice3" value="300" /></td>
    <td><input type="text" id="txtQuantity3" value="3" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
</table>
<div id="lblGrandTotal" />

Upvotes: 3

Related Questions