Group GridView Data

• Download source file (C#) - 6.15 KB
• Download demo - 52.66 KB

Introduction

GridView is one of the most popular controls to display data in a tabular form. But for better analysis, it requires to show the data in some summarized form like Group, Pivot, Graphs, Charts, etc. This articles presents a simplified way to group your data with the appropriate aggregate functions so that you can enhance your reports easily. Facility to customize the group header and footer in your own way becomes the essential part when you are grouping your data. The control shown in the article has taken care of this requirement as well.

Below is a screenshot of grouped data in a GridView:

GroupGridView Control

GroupGridView control is a custom control derived from GridView. The primary purpose for this control is to implement the grouping feature in the GridView. To accommodate the customized group header and footer, GroupContainer class is created which is derived from WebControl and INamingContainer. This class is provided with various aggregate functions that can be applied to each group in your GridView. The useful methods in GroupHeaderTemplate and GroupFooterTemplate are:

1. Average(ColumnName): Returns the average of the data present in the group for the given column
2. Count(ColumnName): Returns the total number of rows present in the group for the given column
3. First(ColumnName): Returns the first element of the given column in the group
4. Last(ColumnName): Returns the last element of the given column in the group
5. Max(ColumnName): Returns the maximum value of the data present in the group for the given column
6. Min(ColumnName): Returns the minimum value of the data present in the group for the given column
7. Sum(ColumnName): Returns the sum of data present in the group for the given column
8. GetValue(DataColumn, PropertyColumn, MatchingValue): Returns the value of the DataColumn whose PropertyColumn is equal to the MatchingValue

How It Works

The logic behind grouping the data in GridView can be divided into three parts:

1. Instantiate the HeaderTemplate Template: To do this, custom control has been created with two exposed properties: GroupHeaderTemplate and GroupFooterTemplate. This Template needs to be instantiated for each group present in your DataSource. This has been done by overriding the PrepareControlHierarchy() method of GridView.
2. Recognize Group and Render Group Header at proper place: To recognize the group, I have overridden OnRowCreated() method of the GridView and added "group" attribute and its value to each row of the table. To align Header and Footer at proper place, JQuery has been used.
3. Providing Hide/Show functionality to the group: The hide/show functionality to each group has been provided using JQuery. Please have a look over RenderClientSideGroup() method to understand the JQuery code used to FadeIn and FadeOut the Group(s). You don't need to learn JQuery to use this control. :)

Using the Code

Using the code is simple. The control is provided with two additional Template Containers: GroupHeaderTemplate and GroupFooterTemplate. Both of these Template containers provide you the facility to write your own custom HTML code and use Aggregation logic to format your Header and Footer of the each group of GridView.

Below is the sample HTML code snippet which you can write to make this control work (don't forget to include JQuery file in your code):

//Copy the GroupGridViewCtrl.dll to your bin directory. Add reference.//
<%@ Register Assembly="GroupGridViewCtrl" 
	Namespace="GroupGridViewCtrl" TagPrefix="gsoft" %>
...
<script type="text/javascript" language="javascript" 
	src="js/jquery-1.4.2.min.js"></script>
...
<gsoft:GroupGridView AllowGrouping="true" GroupColumnName="Year" 
...
<GroupHeaderTemplate>
    <div style="background-color:#ccddff;">
        <table style="width:100%;">
            <tr>
                <td style="width:50%; font-weight:bold;">
		<%# Container.GroupColumnName + ": " + 
			Container.GroupColumnData.ToString() %> </td>
                <td style="width:50%;">Total Students: 
			<%# Container.Count("Name") %></td>
            </tr>
            <tr>
                <td>Average Marks: <%# Math.Round((decimal)
			Container.Average("Marks"), 2) %></td>
                <td>Highest: <%# Container.Max("Marks") %></td>
            </tr>
            <tr>
                <td colspan="2">Topper: <%# Container.GetValue
		("Name", "Marks", Container.Max("Marks").ToString())%></td>
            </tr>
        </table>
    </div>
</GroupHeaderTemplate>

Points of Interest

Along with grouping the data in GridView, the sample will also provide the following things to the beginners:

1. How to create a custom control
2. How to create and use Template/Container Control
3. How to read data from Excel Sheet
4. How to use Linq to filter DataTable data

History

• First version release: October 05, 2010