Dynamic Multiple Row Column Grid Header

• Download source code - 5.19 KB

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.