How to get GridView Running Column Sub Total in ASP.NET

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

create table Item
(
Itemid int identity(1, 1) primary key,
ItemName varchar(100),
ItemPrice decimal(7, 2)
)

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

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="Gridviewsum.aspx.cs" Inherits="UI_Gridviewsum" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h2 style="color: #00CC00">Gridview Column Total and Sub Total</h2>
    <div>
        <asp:GridView ID="GridItem" runat="server" Width="100%"
                AutoGenerateColumns="False"
                RowStyle-HorizontalAlign="Center"
                ShowFooter="True" AllowPaging="True" PageSize="5" OnPageIndexChanging="GridItem_PageIndexChanging" OnRowDataBound="GridItem_RowDataBound"
                BackColor ="White" BorderColor="#CC9966"  BorderWidth="1px" CellPadding="4"  >

                <Columns>
                    <asp:TemplateField HeaderText="Item No">
                        <ItemTemplate><%#Eval("Itemid")%></ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Item Name">
                        <ItemTemplate><%#Eval("ItemName")%></ItemTemplate>

                        <FooterTemplate>
                            <div style="padding:0 0 5px 0"><asp:Label Text="Page Total" runat="server" /></div>
                            <div><asp:Label Text="Grand Total" runat="server" /></div>
                        </FooterTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Price ">
                        <ItemTemplate><asp:Label ID="lblPrice" runat="server" Text='<%#Eval("ItemPrice")%>'>
                            </asp:Label></ItemTemplate>

                        <FooterTemplate>
                            <div style="padding:0 0 5px 0"><asp:Label ID="lblTotal" runat="server" /></div>
                            <div><asp:Label ID="lblTotalPrice" runat="server" /></div>
                        </FooterTemplate>

                    </asp:TemplateField>
                </Columns>
                <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                <RowStyle BackColor="White" ForeColor="#330099" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                <SortedAscendingCellStyle BackColor="#FEFCEB" />
                <SortedAscendingHeaderStyle BackColor="#AF0101" />
                <SortedDescendingCellStyle BackColor="#F6F0C0" />
                <SortedDescendingHeaderStyle BackColor="#7E0000" />
            </asp:GridView>
    </div>
</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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

public partial class UI_Gridviewsum: System.Web.UI.Page {
    string connection = ConfigurationManager.ConnectionStrings["connstring"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            BindItemList();
        }
    }
    private void BindItemList() {
        string Query = "SELECT * FROM Item";
        using(SqlConnection con = new SqlConnection(connection)) {
            using(SqlCommand cmd = con.CreateCommand()) {
                cmd.CommandText = Query;
                con.Open();
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter();
                da.SelectCommand = cmd;
                da.Fill(dt);

                if (ViewState["TotalPrice"] == null) {
                    Decimal Price = 0;
                    for (int i = 0; i <= dt.Rows.Count - 1; i++) {
                        Price += dt.Rows[i].Field < Decimal > (2);
                    }
                    ViewState["TotalPrice"] = Price;
                }
                GridItem.DataSource = dt;
                GridItem.DataBind();
            }
        }
    }
    protected void GridItem_PageIndexChanging(object sender, GridViewPageEventArgs e) {
        GridItem.PageIndex = e.NewPageIndex;
        BindItemList();
    }
    Decimal Page_Sum;
    protected void GridItem_RowDataBound(object sender, GridViewRowEventArgs e) {
        if (e.Row.RowType == DataControlRowType.DataRow) {
            Label lblPageTotal = (Label) e.Row.FindControl("lblPrice");
            Page_Sum += Decimal.Parse(lblPageTotal.Text);
        }
        if (e.Row.RowType == DataControlRowType.Footer) {
            if (ViewState["TotalPrice"] != null && Page_Sum != 0) {
                Label lblTotal = (Label) e.Row.FindControl("lblTotal");
                lblTotal.Text = Page_Sum.ToString();

                Label lblTotalPrice = (Label) e.Row.FindControl("lblTotalPrice");
                lblTotalPrice.Text = ViewState["TotalPrice"].ToString();
            }
        }
    }
}

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.