.NET (295) administrative (41) Ajax (42) AngularJS (2) ASP.NET (144) bicycle (2) books (180) browser (8) C# (133) cars (1) chess (28) CodePlex (10) Coma (8) database (47) deployment (3) Entity Framework (2) essay (110) flash/shockwave (2) flex (1) food (3) friend (2) game (20) idea (5) IIS (8) javascript (82) LInQ (2) Linux (6) management (4) manga (42) misc (670) mobile (1) movies (90) MsAccess (1) murder (2) music (64) mysql (1) news (99) permanent (1) personal (68) PHP (1) physics (2) picture (307) places (12) politics (13) programming (502) rant (120) religion (3) science (43) Sharepoint (3) software (58) space (1) T4 (2) technology (11) Test Driven Development (4) translation (2) VB (2) video (97) Visual Studio (44) web design (45) Windows API (8) Windows Forms (3) Windows Server (5) WPF/Silverlight (63) XML (11)

Wednesday, November 22, 2006

Building a GridView, DataGrid or Table with THEAD, TBODY or TFOOT sections

There are 726 articles on Google when you search "gridview thead". Most of them, and certainly all the first ones, talk about not being able to render thead, tbody and tfoot elements for NET 2.0 table based controls. But it's not so!

Each table row has a property called TableSection. If you set it to TableRowSection.TableHeader, TableBody or TableFooter, the specific tags will be created. Let me show a quick example of creating a THEAD element in a gridview:
gridView.HeaderRow.TableSection=TableRowSection.TableHeader;

And that's it. This kind of behaviour works for the Table WebControl and everything that derives from it or uses it to render itself.
However, the rendering of these elements inside the Table control is done simply with writer.RenderBeginTag(HtmlTextWriterTag.Thead), which gives no one the ability to change from .NET code the attributes of those sections. You can't have it all! You can use CSS, though. ex:
.tableClass thead {
position:relative;
}

10 comments:

A.A said...

Tank you much!
You saved me alot of time

wechel said...

Make sure you set this after data has been bound.

i.e.
void grid_DataBound(object sender, EventArgs e)
{
grid.HeaderRow.TableSection = TableRowSection.TableHeader;
}

Siderite said...

well, yes, best option is at prerender, I think.

Anonymous said...

Thank you. This was exactly what I was looking for!

Anonymous said...

Siderite, thanks for the good work - it was very helpful. however, i'm having issues setting the TableSection for the Rows (to generate TBODY. Can you please post the syntax for that?

Siderite said...

foreach (GridViewRow row in grid.Rows) row.TableSection=TableRowSection.TableBody;

Anonymous said...

Brilliant. Thank you very much!

Anonymous said...

Solution is described at my blog at http://nmarian.blogspot.com/2007/08/aspnet-datagrid-rendered-with-thead.html

Anonymous said...

Hey that code doesn't work for datagrid.

although
Gatagrid.UseAccessibleHeader = True
renders th tags for header columns
unfortunetly not thead tag

Siderite said...

Who uses a DataGrid anymore? Isn't that .Net 1.1? The post does say NET2.0 table based controls.