Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



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

Posted on Wednesday, December 8, 2010 10:29 PM ADO.NET , ASP.NET , JavaScript , C# , GridView | Back to top


Comments on this post: FAQ: GridView Calculation with JavaScript

# re: FAQ: GridView Calculation with JavaScript
Requesting Gravatar...
Nice script. Served exactly the way i wanted so its very useful for me :) thank you for the wonderful code.
Left by Josh on Feb 10, 2011 3:22 AM

# re: FAQ: GridView Calculation with JavaScript
Requesting Gravatar...
i am doing something similar but I could not get the script function to recognize the elements used in the example. Can you possibly explain how you new what elements to focus on. For example:

("<%= GridView1.ClientID %>");
Why that combination --- I had to wind up using MainContent_Gridview1.
And so on for your other selections of whichI have excerpted some code.
(btw i am a computer professional been doing this for over a year but still miles to go before I sleep ;>) thanks


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;
}
Left by barry on Dec 28, 2011 1:04 PM

# re: FAQ: GridView Calculation with JavaScript
Requesting Gravatar...
hey, thanks for great script..

it is can be used for two different grid view but in same page?

thanks in advanced :)
Left by asfz on Oct 30, 2012 12:00 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free