Introduction
This article describes how to merge adjacent cells in a Datagrid
control in ASP.NET, hence gain better look and clarity for a web page. There are several scenarios in web applications 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 will 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 figure below shows the DataGrid
without cell merging. The DataGrid
has 6 rows 8 columns. Here, the data on the Employee Id and Employee Name columns are repeating in two rows, i.e., these are common to adjacent rows, and the rest of the data in each row is unique.
The red circle on the figure shows 1001, Nikhil Vinod repeated twice. The rest of the data on these rows are unique. We can see that the same pattern repeats in the rest of the rows of the DataGrid
.
Cell merging of DataGrid
can be applied in this scenario. We can merge the Employee Id and Employee name cells of adjacent rows, and display the data on the merged cell of the DataGrid
.
After merging the Employee Id and Employee name columns, the DataGrid
looks like:
Now, the data on Employee ID, Employee Name for each group has been merged and displayed. We can now get a very good look of the data on the DataGrid
.
Cell merge can be done during the ItemDataBound
event of the DataGrid
. The RowSpan
property of Cell
is used to merge cells together. Actually, this activity merges cells and displays the data on that, and pushes the existing data forward so that the data is moved to the next adjacent cell. Now the extra data needs to be removed from the DataGrid
. The 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)
{
if (e.Item.ItemIndex % 2 == 0 )
{
e.Item.Cells[0].RowSpan = 2;
e.Item.Cells[1].RowSpan = 2;
}
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 sets the Rowspan
property of the cells, i.e., Employee Id (e.Item.Cells[0])
and Employee name (e.Item.Cells[2]).
Conclusion
It's the simplest way of merging cells in a DataGrid
control in ASP.NET.