Skip to main content

Merging columns in GridView/DataGrid header

As necessity to show header columns in a few rows occurs fairly often it would be good to have such functionality in the GridView/DataGrid control as an in-built feature. But meanwhile everyone solves this problem in his own way.

The described below variant of the merging implementation is based on irwansyah's idea to use the SetRenderMethodDelegate method for custom rendering of grid columns header. I guess this approach can be simplified in order to get more compact and handy code for reuse.

The code overview

As it may be required to merge a few groups of columns - for example, 1,2 and 4,5,6 - we need a class to store common information about all united columns.
private class MergedColumnsInfo
// indexes of merged columns
public List<int> MergedColumns = new List<int>();
// key-value pairs: key = the first column index, value = number of the merged columns
public Hashtable StartColumns = new Hashtable();
// key-value pairs: key = the first column index, value = common title of the merged columns
public Hashtable Titles = new Hashtable();

//parameters: the merged columns indexes, common title of the merged columns
public void AddMergedColumns(int[] columnsIndexes, string title)
StartColumns.Add(columnsIndexes[0], columnsIndexes.Length);
Titles.Add(columnsIndexes[0], title);

Attribute Serializable is added in order to have a possibility to store information about merged columns in ViewState - it is required if paging or sorting is used.

That is the only additional action. Now the code usage.
.ascx file:
//for GridView
<asp:GridView ID="grid" runat=server OnRowCreated="GridView_RowCreated" ... ></asp:GridView>

//for DataGrid
<asp:DataGrid ID="grid" runat=server OnItemCreated="DataGrid_ItemCreated" ... ></asp:DataGrid>

Columns can be defined in design time or can be autogenerated - it does not matter and doesn't influence the further code. Merging also does not harm sorting and paging if they are used in the GridView/DataGrid.

.cs file:
//property for storing of information about merged columns
private MergedColumnsInfo info
if (ViewState["info"] == null)
ViewState["info"] = new MergedColumnsInfo();
return (MergedColumnsInfo)ViewState["info"];

protected void Page_Load(object sender, EventArgs e)
if (!IsPostBack)
//merge the second, third and fourth columns with common title "Subjects"
info.AddMergedColumns(new int[] { 1, 2, 3 }, "Subjects");
grid.DataSource = ... //some data source


Particular code for GridView:
protected void GridView_RowCreated(object sender, GridViewRowEventArgs e)
//call the method for custom rendering the columns headers
if (e.Row.RowType == DataControlRowType.Header)

and for DataGrid:
protected void DataGrid_ItemCreated(object sender, DataGridItemEventArgs e)
//call the method for custom rendering the columns headers
if (e.Item.ItemType == ListItemType.Header)

Next code is common for both GridView and DataGrid:
//method for rendering the columns headers 
private void RenderHeader(HtmlTextWriter output, Control container)
for (int i = 0; i < container.Controls.Count; i++)
TableCell cell = (TableCell)container.Controls[i];

//stretch non merged columns for two rows
if (!info.MergedColumns.Contains(i))
cell.Attributes["rowspan"] = "2";
else //render merged columns common title
if (info.StartColumns.Contains(i))
output.Write(string.Format("<td align='center' colspan='{0}'>{1}</td>",
info.StartColumns[i], info.Titles[i]));

//close the first row
//set attributes for the second row

//start the second row

//render the second row (only the merged columns)
for (int i = 0; i < info.MergedColumns.Count; i++)
TableCell cell = (TableCell)container.Controls[info.MergedColumns[i]];

That is all. The code can be used without any modification, the only part that has to be changed in a concrete case is:
info.AddMergedColumns(new int[] { 1, 2, 3 }, "Foo");
info.AddMergedColumns(new int[] { 6, 7 }, "Bar");
//and so forth ...

Download code - 1.4 Kb


  1. i want to save grid data to database but last row of grid is not save. is there any solution.
    please replay it's urgent


Post a Comment

Popular posts from this blog

How to merge cells with equal values in the GridView

My solution is not the first; however, I think, it is rather universal and very short - less than 20 lines of the code.

The algorithm is simple: to bypass all the rows, starting from the second at the bottom, to the top. If a cell value is the same as a value in the previous (lower) row, then increase RowSpan and make the lower cell invisible, and so forth.

The code that merges the cells is very short:
public class GridDecorator { public static void MergeRows(GridView gridView) { for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--) { GridViewRow row = gridView.Rows[rowIndex]; GridViewRow previousRow = gridView.Rows[rowIndex + 1]; for (int i = 0; i < row.Cells.Count; i++) { if (row.Cells[i].Text == previousRow.Cells[i].Text) { row.Cells[i].RowSpan = previousRow.Cells[i].RowSpan < 2 ? 2 : prev…

JIRA REST API: Cookie-based Authentication

Three authentication methods are proposed by the JIRA REST API documentation: Basic Authentication is a simple but not very safe approach. Credentials are sent in the header on every request and encoding to Base64 is not a proper protection in this case; HTTPS connection is required. OAuth authentication - looks a bit complex and requires additional configuration at the JIRA server that is not always possible. Cookie-based Authentication - this approach seems to be the most convinient one: credentials are checked once, then the authentication cookie only is sent on subsequent requests. However, trying to use the cookie-based authentication I encountered an issue. The approach described in the documentation worked partially: I was able to create a new session and get the response containing the session cookie but all subsequent requests using this session cookie were rejected as unauthorized. Spending some time investigating this I found the cause of the issue: JSESSIONID is not th…