Dynamic Multiple Row Column Grid Header

• Download DynamicMultipleRowColumnGridHeader - 5.2 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 it can be seen, the depth of header is 3. This depth can be any number i.e. there is no limit of 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 appropriate row and column span in the header of DataGrid/GridView. So the problem can be minimized as how to create a collection of table cells with appropriate row and column span to get the desire effect.

1st Step: 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 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.

2nd Step: 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 number of columns (say N) is simple. It will be the number of product strings and in this example N=4.

3rd Step: 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

4th Step: We will compare the contents of two adjacent cells for each row. It the contents are same, we will increase the column span of 1st cell by 1 and delete the content of 2nd 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 1st 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 such 3 collections. Then we will put these collections into a container collection for rendering.

5th and final step: We will render the table cells with row and column span to achieve our goal. While rendering, we can control table cell properties for a better look & fill. In this example, I have used different background color and font size for different level of header. 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 3 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. Header string will be 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 the HeaderDepth.

DynamicHeaders

public class DynamicHeaders
{
    List Headers;
    int HeaderRows;
    int HeaderCols;

    public DynamicHeaders(String Header)
    {
        Headers = new List();
        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. 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 Row created method, header rendering has been delegated to the RenderHeader method. In the RenderHeader method, ParseHeader method of DynamicHeaders class is called and TableCells are rendered from the collection recieved.

History