Merge DataGrid Header

Introduction

This article describes the technique to merge the header of a DataGrid by redirecting the Render method of the DataGrid items.

Background

I found many times the need to merge the header of a DataGrid. So, when I was having spare time, I tried to find a way to do it, and here it is. I know that if you need to merge headers, you can use the Repeater control instead. But if you are fond of DataGrid (just like me), or may be you already used DataGrid, then this article is for you.

Using the code

When rendered, a DataGrid will be converted into a HTML Table element and the header will be the first HTML TR element. So, to have a merged header, we need to have control in the rendering of the header. This can be achieved by redirecting the Render method of the DataGrid header using the SetRenderMethodDelegate of the DataGrid header on ItemCreated event, like this

private void Datagrid1_ItemCreated(object sender,
        System.Web.UI.WebControls.DataGridItemEventArgs e)
{
  //*** Examine if the item created is the header item

  ListItemType lit = e.Item.ItemType;
  if(ListItemType.Header == lit)
  {
      //*** Redirect the default header rendering method to our own method

      e.Item.SetRenderMethodDelegate(new RenderMethod(NewRenderMethod));
  }
}

And here is our own Render method:

/// <summary>

/// This is our custom render method for the grid header item

/// </summary>

/// <param name="writer"></param>

/// <param name="ctl"></param>

private void NewRenderMethod(HtmlTextWriter writer, Control ctl) 
{ 
    //***  We don't need to write the  tag

    //     because it's already written by the writer

    //     so now we write the Name column

    writer.Write("Name\n"); 

    //***  The Age column must have the rowspan attribute

    //     and must be rendered inside the

    //     first row so it will centered vertically

    TableCell cell = (TableCell)ctl.Controls[ctl.Controls.Count-1]; 
    cell.Attributes.Add("rowspan","2"); 
    cell.RenderControl(writer); 

    //***     Now we close the first row, so we can insert the second one

    writer.Write("\n"); 

    //***  Add the style attributes that was defined in design time

    //     to our second row so they both will have the same appearance

    DataGrid1.HeaderStyle.AddAttributesToRender(writer); 

    //***     Insert the second row

    writer.RenderBeginTag("TR"); 

    //***  Render all the cells that was defined

    //     in design time, except the last one

    //     because we already rendered it above

    for(int i=0; i<= ctl.Controls.Count-2; i++) 
    { 
        ctl.Controls[i].RenderControl(writer); 
    } 

    //***  We don't need to write the  close tag

    //     because the writer will do that for us

    //     and so we're done :)

}

I have created a decorator class to decorate a DataGrid (ASPNetDatagridDecorator class) to have a merge header, and all you need to do is define the header cell like this (you can use the auto format feature, but doesn't work for all):

private void Page_Load(object sender, System.EventArgs e)
{
  // Put user code to initialize the page here

  if(!this.IsPostBack)
  {
      TableCell cell = null;
      DataGrid1.DataSource = GetData();
      DataGrid1.DataBind();

      m_add.DatagridToDecorate = Datagrid2;
      ArrayList header = new ArrayList();

      // cell = new TableCell();

      // cell.Text = "Code";

      // cell.RowSpan = 2;

      // cell.HorizontalAlign = HorizontalAlign.Center;

      // header.Add(cell);


      cell = new TableCell();
      cell.Text = "Name";
      cell.RowSpan = 2;
      cell.HorizontalAlign = HorizontalAlign.Center;
      header.Add(cell);

      cell = new TableCell();
      cell.Text = "Name";
      cell.ColumnSpan = 3;
      cell.HorizontalAlign = HorizontalAlign.Center;
      header.Add(cell);

      cell = new TableCell();
      cell.Text = "Age";
      cell.RowSpan = 2;
      cell.HorizontalAlign = HorizontalAlign.Center;
      header.Add(cell);

      cell = new TableCell();
      cell.Text = "School";
      cell.ColumnSpan = 3;
      cell.HorizontalAlign = HorizontalAlign.Center;
      header.Add(cell);

      cell = new TableCell();
      cell.Text = "Religion";
      cell.RowSpan = 2;
      cell.HorizontalAlign = HorizontalAlign.Center;
      header.Add(cell);

      m_add.AddMergeHeader(header);

      Datagrid2.DataSource = GetData();
      Datagrid2.DataBind();

  }

}

By Courtesy of Codeproject

Merge Header - Gridview/DataGrid

Introduction

During development with GridView, we might come across many situations in which we need to extend GridView for our requirements. For example, we need to have a separate header other than the header provided by GridView. In that case we need to add new GridView item of header type. In this article we will see how merge two or more columns.

Requirement

In this example we have simple GridView which is fetching data from xml file and displaying that in the table structure using GridView. In this GridView, we need to add two additional Header with text "Department" and "Employee". First department column should occupy first two columns and Employee column should occupy rest three columns.

Problem

I found in the internet that there are many ways to do this, but we might end up with column alignment problems.

Solution

Here we are going to see one of the best method to do that. To have additional header, we need to add one GridViewRow of header type to GridView inside OnRowCreated event method. The code snippet for doing this,

protected void GridView_Merge_Header_RowCreated(object sender, GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.Header)
 {
     //Build custom header.
     GridView oGridView = (GridView)sender;
     GridViewRow oGridViewRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
     TableCell oTableCell = new TableCell();
  
             //Add Department
             oTableCell.Text = "Department";
             oTableCell.ColumnSpan = 2;
             oGridViewRow.Cells.Add(oTableCell);

             //Add Employee
             oTableCell = new TableCell();
             oTableCell.Text = "Employee";
             oTableCell.ColumnSpan = 3;
             oGridViewRow.Cells.Add(oTableCell);
             oGridView.Controls[0].Controls.AddAt(0, oGridViewRow);
 }
} 

By Courtesy of Codeproject