Click here to Skip to main content
Click here to Skip to main content
Go to top

Cell Merging In GridView

, 18 May 2009
Rate this:
Please Sign up or sign in to vote.
A way to describe how to merge cells in GridView
Click to enlarge image

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

  • 18th May, 2009: Initial post

License

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

Share

About the Author


Comments and Discussions

 
QuestionCell Mergin I rows (not in header) Pinmemberruwanc20033-Mar-13 23:29 
QuestionHelped out a lot Pinmemberjgags12-Dec-12 5:31 
QuestionHow to Merge columns in a Gridview if two cells have duplicate value then i want to merge it PinmemberMember 451035830-Oct-10 15:34 
Generalcell merging Pinmemberreza nazari2-Aug-10 20:45 
General[My vote of 2] Contrast and Compare with a Repeater Pinmemberspoodygoon21-May-09 3:03 
GeneralUseless PinmemberSavara20-May-09 2:38 
GeneralHi Niladri Pinmemberchirag.khatsuriya19-May-09 3:19 
HI,
 
I know this is for VS 2008, but i have try for 2005, but this is not work.
Why?
GeneralRe: Hi Niladri PinmemberNiladri_Biswas19-May-09 5:32 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 18 May 2009
Article Copyright 2009 by Niladri_Biswas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid