Multi column header gridview | ASP.Net 2.0

  • Thread starter Thread starter tirath
  • Start date Start date
T

tirath

hi,
I want to display data in on my web page, in gridview in this format:
Group A Group B
A1 A2 B1 B2
Test 1 1 2 1 2
Test 2 1 2 1 2

Group A is header to columns A1 and A2 and Group B is header to
columns B1 and B2.
How do i add header to columns A1 A2 and B1 B2?

I am using ASP.Net 2.0. Please help me. Is it possible with some other
control instead of gridview?

Thanks
 
Hi,
try to use code like following (its handler for RowDataBound event where you
can modify attributes for any row or cell):

protected void GridView1_RowDataBound(object sender,
GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
// imagine you have 5 cells and you want only three header cells
// 2nd and 3rd columns will have one header
e.Row.Cells[1].Attributes.Add("colspan", "2");
// 4th and 5th columns will also have one header
e.Row.Cells[3].Attributes.Add("colspan", "2");
e.Row.Cells.RemoveAt(2); // you have reduced count of cells by one
e.Row.Cells.RemoveAt(3); // so now you have only 4 cells = last
has index 3
}
}

I hope code with comments is self explanatory. Don't use sorting when you
want to span some columns. Sort expression will still use only column where
header was supposed to be use.

Regards,
Ladislav
 
After looking at the following article
http://dotnetslackers.com/GridView/re-22821_Displaying_GridView_When_No_Data_Exists.aspx

I have come up with an idea that may solve your particular problem: If you
override a GridView and then override its CreateChildControls methods similar
to the following:

protected override int CreateChildControls(System.Collections.IEnumerable
dataSource, bool dataBinding)
{
int result = base.CreateChildControls(dataSource, dataBinding);
//create a new header row
GridViewRow row = base.CreateRow(-1, -1, DataControlRowType.Header,
DataControlRowState.Normal);
//convert the exisiting columns into an array and initialize
DataControlField[] fields = new DataControlField[this.Columns.Count];
this.Columns.CopyTo(fields, 0);
this.InitializeRow(row, fields);
// perform any manipulations with cells that you think are appropriate
// for example, you will need to add colspan attribute to cells 1 and 3,
change their captions, and remove cells 2 and 4
Table table = (Table)this.Controls[0];
table.Rows.AddAt(0, row);
return result;
}

Hope this helps
 
You can use a repeater like this:

<asp:repeater>
<asp:headertemplate>
<table>
<tr>
<td colspan=2>Group A</td>
<td colspan=2>Group B</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
<td>B2</td>
</tr>
</asp:headertemplate>
<asp:itemtemplate>
<tr>
....
</tr>
</asp:itemtemplate>
<asp:footertemplate>
</table>
</asp:footertemplate>
</asp:repeater>

--
Eliyahu Goldin,
Software Developer
Microsoft MVP [ASP.NET]
http://msmvps.com/blogs/egoldin
http://usableasp.net
 
hi,
I want to display data in on my web page, in gridview in this format:
Group A Group B
A1 A2 B1 B2
Test 1 1 2 1 2
Test 2 1 2 1 2

Group A is header to columns A1 and A2 and Group B is header to
columns B1 and B2.
How do i add header to columns A1 A2 and B1 B2?

I am using ASP.Net 2.0. Please help me. Is it possible with some other
control instead of gridview?

Thanks
Click to expand...

Look here:
http://marss.co.ua/MergingGridViewHeaderColumns.aspx

Regards, Mykola
 
Back
Top