Cell Merging of DataGrid in ASP.NET

• Download DataGrid_CellMerge.zip - 24.1 KB

Introduction

This article describes how to merge adjacent cells in a Datagrid control of ASP.NET, hence gains better look and clarity of web page. There are several scenarios in web application which can have some common values repeating in multiple rows. Usually these common data display against a set of unique data in other columns and creates a feeling of repeating the data.

In this article I describe how to eliminate these redundant data in each row and merge the cells together and display the data on the cells.

Using the code

The below figure shows the DataGrid with out cell merging. The DataGrid has 6 rows 8 columns. Here the data on Employee Id and Employee Name columns are repeating in 2 rows, ie, these are common to the adjacent rows and the rest of the data in each row is unique.

The red circle on the figure shows 1001, Nikhil Vinod repeated two times. The rest of the data on these rows are unique. We can see that the same pattern repeates in the rest of the rows of the DataGrid.

The cell merging of DataGrid can be applied in this scenario. We can merge Employee Id and Employee name cells of adjacent rows, and display the data on the merged cell of DataGrid.

After merging the employee Id and Employee name columns of the DataGrid look like as follows:

Now data on Employee ID, Employee Name for each group has been merged and displayed. We got very good look of data on the DataGrid.

Cell merge can be done during the ItemDataBound event of DataGrid. RowSpan property of Cell used to merge the cells together. Actually this activity merges the cells and displays the data on that and pushes the existing data forward, so that the data moved to next adjacent cell. Now the extra data needs to be removed from the DataGrid. Remove or RemoveAt property of the Cell can be used to remove the data from the DataGrid.

protected void grdEmployee_ItemDataBound(object sender, DataGridItemEventArgs e)
{
    if (chkChangetoNormal.Checked)
       {
       // Apply Row span for all even rows

         if (e.Item.ItemIndex % 2 == 0 )
       {
        e.Item.Cells[0].RowSpan = 2;
        e.Item.Cells[1].RowSpan = 2;
       }
       // Remove the extra cells created due to row span for odd rows

       if (e.Item.ItemIndex % 2 == 1 )
       {
        e.Item.Cells.RemoveAt(0); 
        e.Item.Cells.RemoveAt(0); 
        e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Center ;
       }
    }
}

e.Item.ItemIndex represents the row id of the DataGrid, The First code snippet set the Rowspan property of the cells, ie. Employee Id (e.Item.Cells[0]) and Employee name (e.Item.Cells[2]).

Conclusion

It's most simplest way of merging cells in a DataGrid control of ASP.NET.