Click here to Skip to main content
Click here to Skip to main content

Cell Merging In GridView

, 18 May 2009 CPOL
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) Pinmemberruwanc20034-Mar-13 0:29 
QuestionHelped out a lot Pinmemberjgags12-Dec-12 6:31 
QuestionHow to Merge columns in a Gridview if two cells have duplicate value then i want to merge it PinmemberMember 451035830-Oct-10 16:34 
Generalcell merging Pinmemberreza nazari2-Aug-10 21:45 
General[My vote of 2] Contrast and Compare with a Repeater Pinmemberspoodygoon21-May-09 4:03 
Perhaps you could contrast and compare what you have done with a Repeater. I am of the opinion that a repeater is much better suited to work with tables that require merging of cells or more verbose formatting.
 
What I see here is a grid that will gather a great deal of view state and be more difficult to maintain that just straight forward html. However this is a good solution if you are dead set against using Repeaters and don't expect a large amount of rows. But I might not be seeing the big picture you are trying to present.
GeneralUseless PinmemberSavara20-May-09 3:38 
GeneralHi Niladri Pinmemberchirag.khatsuriya19-May-09 4:19 
GeneralRe: Hi Niladri PinmemberNiladri_Biswas19-May-09 6: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 | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 18 May 2009
Article Copyright 2009 by Niladri_Biswas
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid