Geeks With Blogs

News

Free counters

Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.

Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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" >
<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>
<body>
<form id="form1" runat="server">
<asp:gridview ID="GridView1"  runat="server"  ShowFooter="true" AutoGenerateColumns="false">
<Columns>
<ItemTemplate>
<asp:Label ID="LBLPrice" runat="server" Text='<%# Eval("Price","{0:C}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<b>Total Qty:</b>
</FooterTemplate>
</asp:TemplateField>
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Total Amount:</b>
</FooterTemplate>
</asp:TemplateField>
<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: ,,,
Posted on Thursday, December 9, 2010 5:54 PM ASP.NET , JavaScript , C# , GridView | Back to top

Related Posts on Geeks With Blogs Matching Categories

Comments on this post: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total

# re: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
i used it on my html widget but it only displays the total price and total qnty...
Left by arnold on Jan 03, 2011 5:43 AM

# re: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
Can u change or explain this code in c# or .vb? Thanks in advance
Left by SU on Mar 25, 2011 12:05 AM

# re: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
this is awesome! very useful and worked wonderfully. thanks.
Left by gbc on Dec 08, 2011 7:22 AM

# re: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
very fantastic job yaar.. i was searching for this code over one week...Finally i got tat in ur blog...Keep rocking....Very useful..
Left by sathishkumar on Mar 28, 2012 7:31 PM

# re: FAQ: GridView Calculation with JavaScript - Displaying Quantity Total
Hi...its really amazing work... keep rocking....bt i hav a question...i want the price value also to be given on run time as we are giving quantity value... if so, how to calculate... please help me... i got stuck doing my project...Thanks in advance...sathish.parthiban@gmail.co is my mail id...
Left by SATHISH KUMAR on Apr 10, 2012 2:07 PM