Friday, April 18, 2014 Articles RegisterLogin
View Article
In this article I will be showing you how to spruce up the gridview and group your columns for a better user experience. 

We will be changing the GridView from this:

To this:

To accomplish this is very simple and I will only be showing a simplified version here, but this should give you some good ideas of where to go from here. First you will need to create a new C# web project in Visual Studio.

Replace the contents of default.aspx with this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    <form id="form1" runat="server">
        <asp:GridView ID="gvSample" runat="server" AutoGenerateColumns="False"
            onrowcreated="gvSample_RowCreated" Width="100%">
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField HeaderText="Sales" DataField="Q1_Sales_Amount" />
                <asp:BoundField HeaderText="Dollars" DataField="Q1_Sales_Dollars" DataFormatString="{0:C}" />
                <asp:BoundField HeaderText="Amount" DataField="Q2_Sales_Amount" />
                <asp:BoundField HeaderText="Dollars" DataField="Q2_Sales_Dollars" DataFormatString="{0:C}" />
                <asp:BoundField HeaderText="Amount" DataField="Q3_Sales_Amount" />
                <asp:BoundField HeaderText="Dollars" DataField="Q3_Sales_Dollars" DataFormatString="{0:C}" />
                <asp:BoundField HeaderText="Amount" DataField="Q4_Sales_Amount" />
                <asp:BoundField HeaderText="Dollars" DataField="Q4_Sales_Dollars" DataFormatString="{0:C}" />
            <HeaderStyle CssClass="header" />
This will set up our page with a GridView and the columns that we will be using.

Next we will add the code that will create our column grouping. 
In the CodeBehind add a reference at the top to System.Text:
using System.Text;

Now add the following method:
    private DataTable GetData()
        DataTable dtReturn = new DataTable();
        //Create the columns
        dtReturn.Columns.Add(new DataColumn("Name", typeof(string)));
        dtReturn.Columns.Add(new DataColumn("Q1_Sales_Amount", typeof(int)));
        dtReturn.Columns.Add(new DataColumn("Q1_Sales_Dollars", typeof(double)));
        dtReturn.Columns.Add(new DataColumn("Q2_Sales_Amount", typeof(int)));
        dtReturn.Columns.Add(new DataColumn("Q2_Sales_Dollars", typeof(double)));
        dtReturn.Columns.Add(new DataColumn("Q3_Sales_Amount", typeof(int)));
        dtReturn.Columns.Add(new DataColumn("Q3_Sales_Dollars", typeof(double)));
        dtReturn.Columns.Add(new DataColumn("Q4_Sales_Amount", typeof(int)));
        dtReturn.Columns.Add(new DataColumn("Q4_Sales_Dollars", typeof(double)));
        //Populate the table
        Random rndGen = new Random();
        for (int i = 0; i < 20; i++)
            DataRow drNew = dtReturn.NewRow();
            drNew["Name"] = "Foo" + i.ToString();
            drNew["Q1_Sales_Amount"] = rndGen.Next(100,1000);
            drNew["Q1_Sales_Dollars"] = rndGen.Next(1000, 10000);
            drNew["Q2_Sales_Amount"] = rndGen.Next(100, 1000);
            drNew["Q2_Sales_Dollars"] = rndGen.Next(1000, 10000);
            drNew["Q3_Sales_Amount"] = rndGen.Next(100, 1000);
            drNew["Q3_Sales_Dollars"] = rndGen.Next(1000, 10000);
            drNew["Q4_Sales_Amount"] = rndGen.Next(100, 1000);
            drNew["Q4_Sales_Dollars"] = rndGen.Next(1000, 10000);
        return dtReturn;
This method will create some sample data for our tutorial. Next we will add two lines to the Page_Load event. These just set the data source and binds the data to the GridView.
    protected void Page_Load(object sender, EventArgs e)
        this.gvSample.DataSource = this.GetData();

Now we will add the event that will create the column grouping. Add this to your code file:
    protected void gvSample_RowCreated(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.Header)
            //Now we are going to group columns 1-2, 3-4, 5-6
            //We accomplish this by injecting HTML into the first cell of the header row
            StringBuilder sbNewHeader = new StringBuilder();
            sbNewHeader.AppendFormat("&nbsp;</th><th colspan='2' align='center'>Q1</th><th colspan='2' align='center'>Q2</th><th colspan='2' align='center'>Q3</th><th colspan='2' align='center'>Q4</th></tr>");
            sbNewHeader.AppendFormat("<tr class='{0}'><th>{1}", this.gvSample.HeaderStyle.CssClass, e.Row.Cells[0].Text);
            e.Row.Cells[0].Text = sbNewHeader.ToString();

This event is already bound in the GridView when you pasted it into your page earlier. What this does is first test to see if the row is a header row. If the row is a header it then creates a StringBuilder object. The string builder is used to create an HTML fragment that will be injected into the text of the first header row cell. This will create a new row populated with cells that use column spanning to groups the columns below it. The row is then ended and a new row and cell started. And there you have it, a GridView that has column grouping. Hopefully someone will find this of use, if you have any questions please fell free to ask them.

Post Rating


There are currently no comments, be the first to post one.

Post Comment

Only registered users may post comments.
Copyright 2008 by Ryan Mick Terms Of UsePrivacy Statement
Downloaded from