Cell Merging In GridView

Introduction

In many asp.net applications, we use the GridView control for displaying data. It is a very helpful control and powerful indeed.

Many operations can be done using the grid view control but the UI presentation is more important as it is the look-n-feel that matters a lot.

In this small article, I will demonstrate how the cells of the grid can be merged as I have been asked to do the same in one of my recent projects.

Application & Program overview

There may be other ways of implementing the problem but I am presenting the way which I adopted to solve the problem.

In the sample included here, I have created a GridView in the CellMerging.aspx while the datasouce is a datatable included in the DataSource.cs file located in the App_Code folder.

The source table is given below

 public DataTable MyDataTable()


    { 
        DataTable dtsource = new DataTable(); 
  
        //Adding columns to datatable 
        dtsource.Columns.Add("UserId"); 
        dtsource.Columns.Add("Name"); 
        dtsource.Columns.Add("Age"); 
        dtsource.Columns.Add("Address"); 
        dtsource.Columns.Add("Sex"); 
        dtsource.Columns.Add("DOB"); 
        dtsource.Columns.Add("Year"); 
        dtsource.Columns.Add("Designation"); 
  
        //Adding records to the datatable 
        dtsource.Rows.Add("1", "Name1", "20", "Address1", "Male", "20/12/1978", "1978","Student"); 
        dtsource.Rows.Add("2", "Name2", "21", "Address2", "Male", "20/12/1984", "1984", "Doctor"); 
        dtsource.Rows.Add("3", "Name3", "22", "Address3", "Male", "10/11/1943", "1943", "Software Eng."); 
        dtsource.Rows.Add("4", "Name4", "23", "Address4", "Male", "12/12/1956", "1956", "Police man"); 
        dtsource.Rows.Add("5", "Name5", "24", "Address5", "Male", "11/01/1856", "1856", "CEO"); 
        dtsource.Rows.Add("6", "Name6", "25", "Address6", "Female", "29/12/2008", "2008", "Manager"); 
        dtsource.Rows.Add("7", "Name7", "26", "Address7", "Female", "29/12/2004", "2004", "Business man"); 
        dtsource.Rows.Add("8", "Name8", "27", "Address8", "Female", "29/12/1956", "1956", "Student"); 
        dtsource.Rows.Add("9", "Name9", "28", "Address9", "Female", "15/10/2009", "2009", "Project Manager"); 
        dtsource.Rows.Add("10", "Name10", "29", "Address10", "Female", "29/12/2010", "2010", "Doctor"); 
  
        return dtsource;

}

In the Page_Load event I have populated the grid from the datasource defined above

  protected void Page_Load(object sender, EventArgs e)


    { 
        DataSource objdatasource = new DataSource(); 
        grMergedCellExample.DataSource = objdatasource.MyDataTable(); 
        grMergedCellExample.DataBind();

}

Gridview has many events out of which one is RowCreated.

This event comes into picture when a row gets created in the GridView control.

The GridViewRow object gets created even before the GridView is rendered.That means any custom content can be added to the row whenever this event gets fired.

Heneceforth, I have written my code in the GridView's RowCreated event.

Objective

There are 7 cells in the grid

They are :

User Id
Name
Age
Address
Sex
DOB
DOB
Designation

Out of which, I want to merge columns c,d (i.e.Age,Address) under the column name "Merged Column(Age-Address)" while columns f , g & h(i.e. DOB,Year,Designation) under the column name "Merged Column(DOB-Year-Designation)". Columns a & b (i.e. User Id & Name) will remain as it is so as column e i.e. Sex.

The first thing that I checked is that if the grid row type is header or not.

if (e.Row.RowType == DataControlRowType.Header)

Next I created objects for GridView, GridViewRow and Tabelcell


        //Creating a gridview object            
            GridView objGridView = (GridView)sender; 
  
            //Creating a gridview row object 
            GridViewRow objgridviewrow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert); 
  
            //Creating a table cell object

TableCell objtablecell = new TableCell();

The function AddMergedCells(GridViewRow objgridviewrow, TableCell objtablecell, int colspan,string celltext)does the needed operation.

Among the four parameters, the last two are the most important as because the colspan parameter will decide how many rows to span while the celltext holds the Header message to display.

The implemented function is given below

 /// <summary>


    /// Function : AddMergedCells 
    /// Purpose: Adds merged cell in the header 
    /// </summary> 
    /// <param name="objgridviewrow"></param> 
    /// <param name="objtablecell"></param> 
    /// <param name="colspan"></param> 
    private static void AddMergedCells (GridViewRow objgridviewrow, TableCell objtablecell, int colspan,string celltext) 
    { 
        objtablecell = new TableCell(); 
        objtablecell.Text = celltext; 
        objtablecell.ColumnSpan = colspan; 
        objgridviewrow.Cells.Add(objtablecell);

}

How the function is being called is of also utter importance.

e.g

Case I:

I don't want to merge the first two cells . The calling function in that case will pass the following parameter values

AddBlankCells(objgridviewrow, objtablecell,2,string.Empty);

Case 2:

I want to merge the 3^rd & 4th cells . In such a case, the colspan will be 2 while the celltext will the header text. The calling function in that case will pass the following parameter values

AddBlankCells(objgridviewrow, objtablecell, 2, "Merged Column(Age-Address)")

Conclusion

In this article I showed a way of achieving how to merge cells in GridView. There can be many more ways of doing the same. I would love to receive suggestions for doing the same in other ways.

1 Comment

Join the conversation! Your thoughts help the community grow.

Rajendra Tripathy16y ago
Hi Niladri. Your article is helpful, but I need Cell Merging In WPF DataGrid (Windows Application C#). Will you Guide me in this? for more detail u can see- http://img709.imageshack.us/img709/6213/cellmerged.jpg