FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
- by Vincent Maverick Durano
Previously we've talked about how calculate the sub-totals and grand total in GridView here, how to format the numbers into a currency format and how to validate the quantity to just accept whole numbers using JavaScript here. One of the users in the forum (http://forums.asp.net) is asking if how to modify the script to display the quantity total in the footer. In this post I'm going to show you how to it. Basically we just need to modify the javascript CalculateTotals function and add the codes there for calculating the quantity total and display it in the footer. Here are the code blocks below: <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
function CalculateTotals() {
var gv = document.getElementById("<%= GridView1.ClientID %>");
var tb = gv.getElementsByTagName("input");
var lb = gv.getElementsByTagName("span");
var sub = 0;
var total = 0;
var indexQ = 1;
var indexP = 0;
var price = 0;
var qty = 0;
var totalQty = 0;
for (var i = 0; i < tb.length; i++) {
if (tb[i].type == "text") {
ValidateNumber(tb[i]);
price = lb[indexP].innerHTML.replace("$", "").replace(",", "");
sub = parseFloat(price) * parseFloat(tb[i].value);
if (isNaN(sub)) {
lb[i + indexQ].innerHTML = "0.00";
sub = 0;
}
else {
lb[i + indexQ].innerHTML = FormatToMoney(sub, "$", ",", "."); ;
}
indexQ++;
indexP = indexP + 2;
if (isNaN(tb[i].value) || tb[i].value == "") {
qty = 0;
}
else {
qty = tb[i].value;
}
totalQty += parseInt(qty);
total += parseFloat(sub);
}
}
lb[lb.length - 2].innerHTML = totalQty;
lb[lb.length - 1].innerHTML = FormatToMoney(total, "$", ",", ".");
}
function ValidateNumber(o) {
if (o.value.length > 0) {
o.value = o.value.replace(/[^\d]+/g, ''); //Allow only whole numbers
}
}
function isThousands(position) {
if (Math.floor(position / 3) * 3 == position) return true;
return false;
};
function FormatToMoney(theNumber, theCurrency, theThousands, theDecimal) {
var theDecimalDigits = Math.round((theNumber * 100) - (Math.floor(theNumber) * 100));
theDecimalDigits = "" + (theDecimalDigits + "0").substring(0, 2);
theNumber = "" + Math.floor(theNumber);
var theOutput = theCurrency;
for (x = 0; x < theNumber.length; x++) {
theOutput += theNumber.substring(x, x + 1);
if (isThousands(theNumber.length - x - 1) && (theNumber.length - x - 1 != 0)) {
theOutput += theThousands;
};
};
theOutput += theDecimal + theDecimalDigits;
return theOutput;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:gridview ID="GridView1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
<asp:BoundField DataField="Description" HeaderText="Item Description" />
<asp:TemplateField HeaderText="Item Price">
<ItemTemplate>
<asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<b>Total Qty:</b>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="LBLQtyTotal" runat="server" Font-Bold="true" ForeColor="Blue" Text="0" ></asp:Label>
<b>Total Amount:</b>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sub-Total">
<ItemTemplate>
<asp:Label ID="LBLSubTotal" runat="server" ForeColor="Green" Text="0.00"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="LBLTotal" runat="server" ForeColor="Green" Font-Bold="true" Text="0.00"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
</form>
</body>
</html>
Here's the output below when you run it on the page:
I hope someone find this post useful!
Technorati Tags: ASP.NET,C#,JavaScript,GridView
