In my previous post I wrote a simple demo on how to Calculate Totals in GridView and Display it in
the Footer. Basically what it does is it calculates
the total amount by typing into
the TextBox and display
the grand total in
the footer of
the GridView and basically it was a server side implemenation. Many users in
the forums are asking how to do
the same thing without postbacks and how to calculate both amount and total amount together. In this post I will demonstrate how to do this using JavaScript. To get started let's go ahead and set up
the form. Just for
the simplicity of this demo I just set up
the form like this: <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") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="TXTQty" runat="server"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<b>Total Amount:</b>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sub-Total">
<ItemTemplate>
<asp:Label ID="LBLSubTotal" runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="LBLTotal" runat="server" ForeColor="
Green"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:gridview>
As you can see there's no fancy about
the mark up above. It just a standard GridView with BoundFields and TemplateFields on it. Now just for
the purpose of this demo I just use a dummy data for populating
the GridView. Here's
the code below:
public partial class GridCalculation : System.Web.UI.Page
{
private void BindDummyDataToGrid() {
DataTable dt = new DataTable();
DataRow dr = null;
dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
dt.Columns.Add(new DataColumn("Description", typeof(string)));
dt.Columns.Add(new DataColumn("Price", typeof(string)));
dr = dt.NewRow();
dr["RowNumber"] = 1;
dr["Description"] = "Nike";
dr["Price"] = "1000";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 2;
dr["Description"] = "Converse";
dr["Price"] = "800";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 3;
dr["Description"] = "Adidas";
dr["Price"] = "500";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 4;
dr["Description"] = "Reebok";
dr["Price"] = "750";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 5;
dr["Description"] = "Vans";
dr["Price"] = "1100";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["RowNumber"] = 6;
dr["Description"] = "Fila";
dr["Price"] = "200";
dt.Rows.Add(dr);
//Bind
the Gridview
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
BindDummyDataToGrid();
}
}
}
Now try to run
the page.
The output should look something like below:
The Client-Side Calculation
Here's
the code for
the GridView calculation:
<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;
for (var i = 0; i < tb.length; i++) {
if (tb[i].type == "text") {
sub = parseFloat(lb[indexP].innerHTML) * parseFloat(tb[i].value);
if (isNaN(sub)) {
lb[i + indexQ].innerHTML = "";
sub = 0;
}
else {
lb[i + indexQ].innerHTML = sub;
}
indexQ++;
indexP = indexP + 2;
total += parseFloat(sub);
}
}
lb[lb.length -1].innerHTML = total;
}
</script>
The code above calculates
the sub-total by multiplying
the price and
the quantity and at
the same time calculates
the total amount by adding
the sub-total values. Now you can simply call
the JavaScript function above like this:
<ItemTemplate>
<asp:TextBox ID="TXTQty" runat="server" onkeyup="CalculateTotals();"></asp:TextBox>
</ItemTemplate>
Running
the code above will display something like below:
That's it! I hope someone find this post useful!
Technorati Tags: ASP.NET,JavaScript,GridView,TipsTricks
