Click here to Skip to main content
15,868,141 members
Articles / Web Development / IIS

Cell Merging of DataGrid in ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.93/5 (9 votes)
10 Oct 2007CPOL2 min read 75K   914   37   8
This article depicts how to merge cells in the DataGrid control in ASP.NET, hence gains better look and clarity.

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.

Screenshot - Image_1.jpg

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:

Screenshot - Image_3.jpg

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.

C#
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 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionGrouping the Rows Pin
duyanhphamkiller25-Aug-14 23:26
duyanhphamkiller25-Aug-14 23:26 
Generalif we don't know the number of repeat previously Pin
Rounak Hasan14-Sep-10 0:56
Rounak Hasan14-Sep-10 0:56 
Questionanybody send the mail please. Pin
senthilvinayagan12-Oct-09 1:53
senthilvinayagan12-Oct-09 1:53 
Generalvrrification Pin
pune30-Sep-08 2:35
pune30-Sep-08 2:35 
AnswerRe: merge for more than 2 rows Pin
Deepthi Viswanathan Nair29-Sep-08 6:55
Deepthi Viswanathan Nair29-Sep-08 6:55 
Questioncan this be done w/gridview too? Pin
Edelman16-Oct-07 2:21
Edelman16-Oct-07 2:21 
AnswerRe: can this be done w/gridview too? Pin
Mike Flavin15-Nov-07 0:18
Mike Flavin15-Nov-07 0:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.