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>
Comments
Post a Comment