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"

In my previous post here we've talked about how to calculate the sub-totals and grand total in GridView using JavaScript. In this post I'm going take more step further and will demonstrate how are we going to format the totals into a currency and how to validate the input that would only allow you to enter a whole number in the quantity TextBox.

Here are the code blocks below:

ASPX Source:

```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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;

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;

total += parseFloat(sub);
}
}

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>
</asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<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>```

Code Behind Source:

```public partial class GridCalculation : System.Web.UI.Page
{
private void BindDummyDataToGrid() {

DataTable dt = new DataTable();
DataRow dr = null;

dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Description"] = "Nike";
dr["Price"] = "1000";

dr = dt.NewRow();
dr["RowNumber"] = 2;
dr["Description"] = "Converse";
dr["Price"] = "800";

dr = dt.NewRow();
dr["RowNumber"] = 3;
dr["Price"] = "500";

dr = dt.NewRow();
dr["RowNumber"] = 4;
dr["Description"] = "Reebok";
dr["Price"] = "750";

dr = dt.NewRow();
dr["RowNumber"] = 5;
dr["Description"] = "Vans";
dr["Price"] = "1100";

dr = dt.NewRow();
dr["RowNumber"] = 6;
dr["Description"] = "Fila";
dr["Price"] = "200";

//Bind the Gridview
GridView1.DataSource = dt;
GridView1.DataBind();

}

protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
BindDummyDataToGrid();
}
}
}```

Running the code above will display something like this:

After entering the quantity in the TextBox

That's it! I hope someone find this post useful!

Posted on Thursday, December 9, 2010 5:17 PM ASP.NET , JavaScript , C# , Tips&Tricks , GridView | Back to top

Related Posts on Geeks With Blogs Matching Categories

Comments on this post: FAQ: GridView Calculation with JavaScript - Formatting and Validation