Cell Merging In GridView

• Download source - 5.03 KB

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 Gridview 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

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 the 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. Henceforth, I have written my code in the GridView’s RowCreated event.

Objective

There are 7 cells in the grid. They are:

1. User Id
2. Name
3. Age
4. Address
5. Sex
6. DOB
7. Year
8. Designation

Out of these, I want to merge columns c, d (i.e. Age, Address) under the column name "Merged Column(Age-Address)" and 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 whether the grid row type is header or not.

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

Next I created objects for GridView, GridViewRow and Tablecell.

//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 ones 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:

/// 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:

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

Case II

I want to merge the third & fourth cells. In such a case, the colspan will be 2 while the celltext will have the header text. The calling function in that case will pass the following parameter values:

AddMergedCells(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 this in other ways.

History

• 18^th May, 2009: Initial post