Displaying Running Total in GridView

Displaying a running total is always good for the audience. You can display a running total by using a server side button click or by using a simple Javascript code. In this article I will demonstrate that how you can display the running total using the Javascript code. The running total will be displayed inside the GridView control.

Introduction:

Creating the GridView:

The GridView consists of two columns namely “Product Name” and the Price. The product name is displayed from the database table and the price is inserted by the user. Once, the price is inserted the total is displayed in the footer of the GridView control. Take a look at the code below:

<asp:GridView ID="gvSales" runat="server" AutoGenerateColumns="False" ShowFooter="True">

<asp:TemplateField HeaderText="Product Name">

<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>' />

</ItemTemplate>

<b>Total</b>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Price">

<asp:TextBox ID="txtPrice" runat="server" />

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtTotal" Font-Bold="true" Enabled="false" BackColor="Khaki" runat="server" />

</FooterTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

I have made the FooterTemplate bold since, the total will be displayed there.

Populating the GridView Control:

I have created a custom table “Sales” which is populated with dummy data. Check out the code below which uses the DataSet to populate the GridView control.

private void BindData()

{

SqlConnection myConnection = new SqlConnection("Server=localhost;Database=School;Trusted_Connection=true");

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Sales", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds);

gvSales.DataSource = ds;

gvSales.DataBind();

}

After populating the GridView it will look something like this:

Attaching the onChange event to the TextBox:

Since, we will be keeping the running total and we don’t want to click any button to update the total so, we will use JavaScript to do the magic. The onChange event of the TextBox is fired whenever the value inside the TextBox is changed. Take a look at the code below which attaches the onChange event to the TextBox.

<asp:TemplateField HeaderText="Price">

<asp:TextBox ID="txtPrice" onChange="Check(this.value)" runat="server" />

</ItemTemplate>

Now, let’s take a look at the JavaScript “Add” function.

// declare a global variable

var sum = 0;

function Add(amount)

{

// set the value in the total box

// The Number function forces the JavaScript to recognizes the input as a number

sum += Number(amount);

document.getElementById("gvSales_ctl07_txtTotal").innerText = sum;

}

The highlight of the Add function is the use of the JavaScript Number function which is used to convert the input value to a number. The variable sum is a global variable which is used to store the running total.

Take a look at the screen shot below which shows you the running total:

Conclusion:

In this article I showed that how you can use the simple JavaScript function to perform a running total. Using JavaScript in this scenario is a good idea since you don’t want to refresh the page whenever the user changes the value in the TextBox.

I hope you liked the article, happy coding

Update: One of the readers pointed out a bug in the sample code which is that the amount is not added when the user edit the TextBoxes. I have fixed the bug and uploaded the latest sample code. You can download the sample code from the link below.

PS: I have also blogged about this bug which can be viewed at the following url http://geekswithblogs.net/azamsharp/archive/2006/07/05/84133.aspx