Skip to main content

GridView Calculation with JavaScript


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

Popular posts from this blog

Authentication ASP.NET_SessionId (Session) along with AuthToken (GUID) cookie

Authentication ASP.NET_SessionID (Session) along with AuthToken (GUID) cookie Introduction ASP.NET Session keeps track of the user by creating a cookie called  ASP.NET_SessionId  in the user browser. This cookie value is checked for every request to ensure that the data being served is specific to that user. In many applications, a Session variable is used to track the logged in user, i.e., if a session variable exists for that user, then the user is logged in, otherwise not. Background Whenever any data is saved into the Session, the  ASP.NET_SessionId  cookie is created in the user’s browser. Even if the user has logged out (means the Session data has been removed by calling the  Session.Abandon() or  Session.RemoveAll()  or  Session.Clear()  method), this  ASP.NET_SessionId  cookie and its value is not deleted from the user browser. This legitimate cookie value can be used by the hijacker to hijack the user session by g...

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
C# HttpClient tutorial C# HttpClient tutorial shows how to create HTTP requests with HttpClient in C#. In the examples, we create simple GET and POST requests. The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. HttpClient  is a base class for sending HTTP requests and receiving HTTP responses from a resource identified by a URI. C# HttpClient status code HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: Informational responses (100–199) Successful responses (200–299) Redirects (300–399) Client errors (400–499) Server errors (500–599) Program.cs using System; using System.Net.Http; using System.Threading.Tasks; namespace HttpClientStatus { class Program { static async Task Main(string[] args) { using var client =...