Merging Cells in DataGrid

Merging Cells in DataGrid 

By default, all the data bound to the DataGrid are displayed in the tabular form, which is like an ordinary table. But, however, sometimes we neeed to adjust or change the appearance of the grid so that the displaying data would be presented nicely and clearly. And here is the reason this article comes about. I would like to show you how to merge the cells (columns in a row) in the DataGrid.

As what I said in my first article before, the onItemCreated event is the great place for us to edit and change the appearance of the datagrid. ( not to forget about the ItemDataBound event, too).

In the example below, I use the Pubs as my database, retrieving au_id, au_fname and au_lname fields frome the Authors table. Then, I would like to merge the 2nd and 3rd cells at the header, and all cells at the footer there.

protected void dgrdAuthors_ItemCreated(Object sender, DataGridItemEventArgs e)
{
     // if it is header
     if(e.Item.ItemType == ListItemType.Header)
     {
          e.Item.Cells.RemoveAt(2);      // Removing 3rd cell
          e.Item.Cells[1].ColumnSpan=2;      // Merging 2nd and 3rd cells
          e.Item.Cells[0].Text = "Author ID";
          e.Item.Cells[1].Text = "Author Full Names";
     }
     else if(e.Item.ItemType == ListItemType.Footer)
     {
          e.Item.Cells.RemoveAt(0);      // Removing the first cell
          e.Item.Cells.RemoveAt(0);      // Removing the second cell
          e.Item.Cells[0].HorizontalAlign = HorizontalAlign.Center;
          e.Item.Cells[0].Text = " End of Records";
     }
}

Header part

In the code above, first, I check whether the current row created is Header of the DataGrid. If it is header, then I remove the 3rd cell (which is au_lname field) of the row by using the RemoveAt(). This method will remove the particular cell at the specified position. I call RemoveAt(2), which removes the 3rd cell (always start with 0). Then, I merge the column 2 and 3 (au_fname and au_lname) by assigning the ColumnSpan property to 2, which takes up 2 cells in the row.

As a result, the header eventually has 2 cells. 1 is cell for Author ID field, and another is merged cell for the Author Full Name. Then, I assign the text to the appropriate cells.


Footer part

At the footer, I would like merge all the 3 cells into 1 cell. Hence, I remove the first cell by calling the RemoveAt(0). And you would wondering why I call this method twice. The reason is, when I remove the first cell of the 3 cells, the second cell becomes the first cell. Therefore, I have to call the RemoveAt(0) once again to remove the second cell, which is already become the first cell. By now, I can merge all the cells by assigning 3 to ColumnSpan property. Also, I set the HorizontalAlign to center so that the text would be displayed at the center.



Definitions: ColumnSpan | RemoveAt()



~~ Happy Programming ~~~