# Calculate running total and percentage in gridview using Jquery in ASP.Net

• ### Question

• User1910487977 posted
``` <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
\$(".calculate").keyup(function () {
Calculate();
});
function Calculate() {
var grandTotal = 0;
\$('[id*=testgrid] tr').each(function () {
var row = \$(this);
var qty = \$('[id*=txtCalcQuantity]', row).val();
var price = \$('[id*=txtCalcUnitprice]', row).val();
var total;
var perc;
if (qty != '' && !isNaN(qty) && price != '' && !isNaN(price)) {
total = parseFloat(qty) * parseFloat(price);
grandTotal += total;
\$("[id*=lblGrandTotal]").html(grandTotal);
} else if (qty == '' || price == '') {
total = 0;
grandTotal += total;
\$("[id*=lblGrandTotal]").html(grandTotal);
}
\$('[id*=lblTotal]', row).html(total);
})
SetPercentage(grandTotal);
}
function SetPercentage(grandTotal) {
\$('[id*=lblTotal]').each(function () {
var total = \$(this).html();
var row = \$(this).closest('tr');
if (total != '' && total != 0) {
var percent = (parseFloat(total) / grandTotal).toFixed(2);
\$('[id*=lblPercentage]', row).html(percent);
}
});
}
});
</script>
<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
<Columns>
<asp:BoundField DataField="RowNum" />
<ItemTemplate>
<asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server" class="calculate"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblGrandTotal" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
class="calculate"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblPercentage" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>```
```protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
testgrid.DataSource = dt;
testgrid.DataBind();
}
}```

The above code is working fine. Instead of label in total column i would like to have textbox. Where i need to change the code?

Instead of this <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label> i would like to have Textbox control.

Saturday, November 9, 2019 8:03 AM

• User288213138 posted

Hi UmerFaiz001,

Instead of label in total column i would like to have textbox. Where i need to change the code?

You can get the Textbox value by val() method. The val() method returns or sets the value attribute of the selected elements. and the html() method sets or returns the content of the selected elements.

The code:

```<script type="text/javascript">
\$(".calculate").keyup(function () {
Calculate();
});
function Calculate() {
var grandTotal = 0;
\$('[id*=testgrid] tr').each(function () {
var row = \$(this);
var qty = \$('[id*=txtCalcQuantity]', row).val();
var price = \$('[id*=txtCalcUnitprice]', row).val();
var total;
var perc;
if (qty != '' && !isNaN(qty) && price != '' && !isNaN(price)) {
total = parseFloat(qty) * parseFloat(price);
grandTotal += total;
\$("[id*=lblGrandTotal]").html(grandTotal);
}
else if (qty == '' || price == '') {
total = 0;
grandTotal += total;
\$("[id*=lblGrandTotal]").html(grandTotal);
}
\$('[id*=lblTotal]', row).val(total);
})
SetPercentage(grandTotal);
}
function SetPercentage(grandTotal) {
\$('[id*=lblTotal]').each(function () {
var total = \$(this).val();
var row = \$(this).closest('tr');
if (total != '' && total != 0) {
var percent = (parseFloat(total) / grandTotal).toFixed(2);
\$('[id*=lblPercentage]', row).html(percent);
}
});
}
});
</script>

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
<Columns>
<asp:BoundField DataField="RowNum" />
<ItemTemplate>
<asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server" class="calculate"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblGrandTotal" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
class="calculate"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<ItemTemplate>
<%--<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>--%>
<asp:TextBox ID="lblTotal" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblPercentage" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>```

The result:

Best regards,

sam

• Marked as answer by Thursday, October 7, 2021 12:00 AM
Monday, November 11, 2019 7:55 AM