This article shows how to get a GridView's current page row column total of a sum and the GridView's all rows column grand total of the sum.

Step 1: Database

First create a table in a database as in the following.

Table: Item

  1. create table Item
  2. (
  3. Itemid int identity(1, 1) primary key,
  4. ItemName varchar(100),
  5. ItemPrice decimal(7, 2)
  6. )
Now fill in some records in a database as in the following:



Figure 1: Table Record

Step 2: Visual Studio
  1. Add a new project.
  2. Go to the project in Solution Explorer.
  3. Right-click and Add Item.
  4. Select Web Form as in the following.



Figure 2: Add Form

Step 3: UI Design

In this Design section add a GridView control to display the database table data on a web page.

UI Design

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="Gridviewsum.aspx.cs" Inherits="UI_Gridviewsum" %>
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  4. </asp:Content>
  5. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  6. <h2 style="color: #00CC00">Gridview Column Total and Sub Total</h2>
  7. <div>
  8. <asp:GridView ID="GridItem" runat="server" Width="100%"
  9. AutoGenerateColumns="False"
  10. RowStyle-HorizontalAlign="Center"
  11. ShowFooter="True" AllowPaging="True" PageSize="5" OnPageIndexChanging="GridItem_PageIndexChanging" OnRowDataBound="GridItem_RowDataBound"
  12. BackColor ="White" BorderColor="#CC9966" BorderWidth="1px" CellPadding="4" >
  14. <Columns>
  15. <asp:TemplateField HeaderText="Item No">
  16. <ItemTemplate><%#Eval("Itemid")%></ItemTemplate>
  17. </asp:TemplateField>
  19. <asp:TemplateField HeaderText="Item Name">
  20. <ItemTemplate><%#Eval("ItemName")%></ItemTemplate>
  22. <FooterTemplate>
  23. <div style="padding:0 0 5px 0"><asp:Label Text="Page Total" runat="server" /></div>
  24. <div><asp:Label Text="Grand Total" runat="server" /></div>
  25. </FooterTemplate>
  27. </asp:TemplateField>
  29. <asp:TemplateField HeaderText="Price ">
  30. <ItemTemplate><asp:Label ID="lblPrice" runat="server" Text='<%#Eval("ItemPrice")%>'>
  31. </asp:Label></ItemTemplate>
  33. <FooterTemplate>
  34. <div style="padding:0 0 5px 0"><asp:Label ID="lblTotal" runat="server" /></div>
  35. <div><asp:Label ID="lblTotalPrice" runat="server" /></div>
  36. </FooterTemplate>
  38. </asp:TemplateField>
  39. </Columns>
  40. <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
  41. <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
  42. <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
  43. <RowStyle BackColor="White" ForeColor="#330099" />
  44. <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
  45. <SortedAscendingCellStyle BackColor="#FEFCEB" />
  46. <SortedAscendingHeaderStyle BackColor="#AF0101" />
  47. <SortedDescendingCellStyle BackColor="#F6F0C0" />
  48. <SortedDescendingHeaderStyle BackColor="#7E0000" />
  49. </asp:GridView>
  50. </div>
  51. </asp:Content>
Step 4: UI Code

In this code section we will write the GridView bind code and add a GridView page index changing command and row data bound command as in the following from the GridView properties.



Figure 3: Add Command

Also add a viewstate for the store item price.

UI CODE
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Configuration;
  8. using System.Data;
  9. using System.Data.SqlClient;
  11. public partial class UI_Gridviewsum: System.Web.UI.Page {
  12. string connection = ConfigurationManager.ConnectionStrings["connstring"].ConnectionString;
  13. protected void Page_Load(object sender, EventArgs e) {
  14. if (!IsPostBack) {
  15. BindItemList();
  16. }
  17. }
  18. private void BindItemList() {
  19. string Query = "SELECT * FROM Item";
  20. using(SqlConnection con = new SqlConnection(connection)) {
  21. using(SqlCommand cmd = con.CreateCommand()) {
  22. cmd.CommandText = Query;
  23. con.Open();
  24. DataTable dt = new DataTable();
  25. SqlDataAdapter da = new SqlDataAdapter();
  26. da.SelectCommand = cmd;
  27. da.Fill(dt);
  29. if (ViewState["TotalPrice"] == null) {
  30. Decimal Price = 0;
  31. for (int i = 0; i <= dt.Rows.Count - 1; i++) {
  32. Price += dt.Rows[i].Field < Decimal > (2);
  33. }
  34. ViewState["TotalPrice"] = Price;
  35. }
  36. GridItem.DataSource = dt;
  37. GridItem.DataBind();
  38. }
  39. }
  40. }
  41. protected void GridItem_PageIndexChanging(object sender, GridViewPageEventArgs e) {
  42. GridItem.PageIndex = e.NewPageIndex;
  43. BindItemList();
  44. }
  45. Decimal Page_Sum;
  46. protected void GridItem_RowDataBound(object sender, GridViewRowEventArgs e) {
  47. if (e.Row.RowType == DataControlRowType.DataRow) {
  48. Label lblPageTotal = (Label) e.Row.FindControl("lblPrice");
  49. Page_Sum += Decimal.Parse(lblPageTotal.Text);
  50. }
  51. if (e.Row.RowType == DataControlRowType.Footer) {
  52. if (ViewState["TotalPrice"] != null && Page_Sum != 0) {
  53. Label lblTotal = (Label) e.Row.FindControl("lblTotal");
  54. lblTotal.Text = Page_Sum.ToString();
  56. Label lblTotalPrice = (Label) e.Row.FindControl("lblTotalPrice");
  57. lblTotalPrice.Text = ViewState["TotalPrice"].ToString();
  58. }
  59. }
  60. }
  61. }
Step 5: Browser

Now your page is ready to run in a browser, press F5.



Figure 4: Grid Page 1 Sub Total and Grand Total



Figure 5: Grid Page 2 Sub Total and Grand Total

I hope you understand how to get a running item price subtotal and total using an ASP.Net GridView control.