Click here to Skip to main content
Click here to Skip to main content

Dynamic Multiple Row Column Grid Header

, 15 Jul 2008
Rate this:
Please Sign up or sign in to vote.
Creating a dynamic header for a DataGrid or GridView with multiple row/columns in ASP.NET.

Introduction

Let’s assume we have a product table as shown below:

ProductId ProductName ParentProductId
1 SOAP NULL
2 SHAMPOO NULL
3 Bath Soap 1
4 Pink Soap 3
5 White Soap 3
6 Toilet Soap 1

As can be seen, the depth of the header is 3. This depth can be any number, i.e., there is no limit to hierarchy depth. Our objective is to add a header at the top of a GridView or DataGrid as shown below:

SOAP SHAMPOO
Bath Soap Toilet Soap
White Soap Pink Soap

Background

The approach I have taken is to draw table cells with the appropriate row and column span in the header of the DataGrid/GridView. So the problem can be minimized as how to create a collection of table cells with the appropriate row and column span to get the desired effect.

  • Step 1: We need to create a header string as SOAP|Bath Soap|Pink Soap,SOAP|Bath Soap|White Soap,SOAP|Toilet Soap,SHAMPOO. If we take a close look at the string, we will find that each product has been formed as a ‘|’ (pipe) separated string with all its parents. Then, all these product strings are concatenated as a header string using ‘,’ as the separator. In this article, the string was hard coded. But in actual development, the string can be formed from the database using a Stored Procedure.
  • Step 2: We will examine each product string and find out the maximum occurrences of ‘|’. This number plus 1 (say M) will be the number of rows of the header. In this example, M=3. Finding out the number of columns (say N) is simple. It will be the number of product strings, and in this example, N=4.
  • Step 3: We will create a M by N matrix and put the header strings as below:
  • SOAP SOAP SOAP SHAMPOO
    Bath Soap Bath Soap Toilet Soap  
    White Soap Pink Soap    
  • Step 4: We will compare the contents of two adjacent cells for each row. If the contents are same, we will increase the column span of the first cell by 1 and delete the content of the second cell. Then, we will compare the contents of two adjacent cells for each column. If cell1 has value and cell2 doesn’t have any value, we will increase the row span of the first cell by 1. For each row, we will create a collection of headers with calculated column and row span. In this example, there will be three such collections. Then, we will put these collections into a container collection for rendering.
  • Final step (Step 5): We will render the table cells with row and column span to achieve our goal. While rendering, we can control the table cell properties for a better look and feel. In this example, I have used different background colors and font sizes for different levels of headers. I have also added an XML file with some data (say sales data of the products), and the final outcome is:
SOAP SHAMPOO
Bath Soap Toilet Soap
Pink Soap White Soap
100 200 300 400
10 20 30 40
1 2 3 4
100 200 300 400

Using the code

I have created three classes to parse the header string and create the collection to render:

  • DynamicHeaderCell
  • DynamicHeader
  • DynamicHeaders

DynamicHeaderCell

public class DynamicHeaderCell
{
    public String Header { get; set; }
    public int RowSpan { get; set; }
    public int ColSpan { get; set; }
    
    public DynamicHeaderCell(String header)
    {
        RowSpan = 1;
        ColSpan = 1;
        Header = header;
    }
}

Objects of this class are used to generate the collection. The header string will be the content of TableCell, and RowSpan and ColSpan will be used to set the RowSpan and ColumnSpan of the table cell.

DynamicHeader

public class DynamicHeader
{
    public int HeaderDepth { get; set; }
    public String[] Headers { get; set; }
    public DynamicHeader(String header)
    {
        Headers = header.Split('|');
        HeaderDepth = Headers.Length;
    }
}

Each individual product string is parsed in this class. The depth is stored in HeaderDepth.

DynamicHeaders

public class DynamicHeaders
{
    List<DynamicHeader> Headers;
    int HeaderRows;
    int HeaderCols;

    public DynamicHeaders(String Header)
    {
        Headers = new List<DynamicHeader>();
        String[] HeaderParts = Header.Split(',');
        foreach (String tmpHeaderPart in HeaderParts)
            Headers.Add(new DynamicHeader(tmpHeaderPart));

        HeaderCols = Headers.Count;
        HeaderRows = Headers.Max(H => H.HeaderDepth);
        ParseHeader();
    }

    public ArrayList ParseHeader()
}

Header string is parsed in this class. The ParseHeader() method implements the logic discussed above and returns the collection for rendering.

Rendering

protected void GridViewWithDynamicHeader_RowCreated(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.Header)
        //Render the header
        e.Row.SetRenderMethodDelegate(new RenderMethod(RenderHeader));
}

In the GridView's RowCreated method, the header rendering has been delegated to the RenderHeader method. In the RenderHeader method, the ParseHeader method of the DynamicHeaders class is called and TableCells are rendered from the collection received.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Somnath Pal
Architect Fountainhead Software Solutions Private Limited
India India
No Biography provided

Comments and Discussions

 
QuestionTwo grids PinmemberVenkateswara Rao Reddipalli5-Feb-14 1:13 
AnswerRe: Two grids PinmemberSomnath Pal5-Feb-14 1:21 
GeneralRe: Two grids PinmemberVenkateswara Rao Reddipalli5-Feb-14 1:48 
GeneralRe: Two grids PinmemberSomnath Pal5-Feb-14 2:10 
GeneralRe: Two grids PinmemberVenkateswara Rao Reddipalli5-Feb-14 18:04 
GeneralRe: Two grids PinmemberSomnath Pal5-Feb-14 19:30 
GeneralRe: Two grids PinmemberVenkateswara Rao Reddipalli5-Feb-14 20:22 
GeneralRe: Two grids PinmemberSomnath Pal6-Feb-14 19:25 
GeneralRe: Two grids PinmemberVenkateswara Rao Reddipalli6-Feb-14 20:01 
QuestionProblem in Merging Last Row PinprofessionalMember 1050050616-Jan-14 21:55 
QuestionRe: Problem in Merging Last Row PinmemberSomnath Pal16-Jan-14 22:08 
AnswerRe: Problem in Merging Last Row PinprofessionalMember 1050050617-Jan-14 17:46 
AnswerRe: Problem in Merging Last Row PinprofessionalMember 1050050619-Jan-14 17:15 
GeneralRe: Problem in Merging Last Row PinmemberSomnath Pal21-Jan-14 4:22 
GeneralRe: Problem in Merging Last Row PinprofessionalMember 1050050621-Jan-14 18:41 
AnswerRe: Problem in Merging Last Row PinmemberSomnath Pal21-Jan-14 20:09 
GeneralRe: Problem in Merging Last Row PinprofessionalMember 1050050621-Jan-14 22:24 
AnswerRe: Problem in Merging Last Row [modified] PinmemberSomnath Pal21-Jan-14 22:48 
GeneralRe: Problem in Merging Last Row PinprofessionalMember 1050050622-Jan-14 16:56 
GeneralMy vote of 5 Pinmemberflexmis16-Aug-12 22:14 
QuestionSorting/Buttons Pinmemberdebiloid11-Jul-12 3:28 
QuestionError when exporting to Excel Pinmemberdeni_syahreza24-Aug-11 5:44 
AnswerRe: Error when exporting to Excel PinmemberSomnath Pal24-Aug-11 7:51 
GeneralRe: Error when exporting to Excel [modified] Pinmemberdeni_syahreza24-Aug-11 8:23 
GeneralRe: Error when exporting to Excel PinmemberSomnath Pal24-Aug-11 21:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 16 Jul 2008
Article Copyright 2008 by Somnath Pal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid