Accessible DataGrid Header

Published 14 January 04 05:50 PM | despos

An easy way to get a DataGrid control to display a <TH> row? As you probably know, by default the header row shows up using <TD> elements. However, <TH> elements are often required for accessibility purposes. As far as I know, in Whidbey the GridView control--the DataGrid successor--will have an ad hoc property that, if  set, enables the control to generate a <TH> header.  

How to get the same for ASP.NET 1.x? As Scott Galloway suggested, go here and get this hotfix for ASP.NET 1.1. Or in alternative read on.

I'm afraid you need a super DataGrid class. The following code captures the markup that a certain fully configured DataGrid control would generate.

StringWriter writer = new StringWriter();
HtmlTextWriter buffer = new HtmlTextWriter(writer);
base.Render(buffer);
string gridMarkup = writer.ToString();

The gridMarkup string contains the HTML text for a table. At this point, you parse that text and replaces the header's TD with TH elements. When you're done, you simply output the new string. Where does all thing happen? In the overridden Render method of your super DataGrid control.

protected override void Render(HtmlTextWriter output)  
{

   // Get the default markup

       // TODO

   // Modify the string

      // TODO

   // Write it out

   output.Write(gridMarkup);

}

This code is illustrated (with other purposes) in my January 2004 Cutting Edge column on MSDN Magazine.

Comments

# Scott Galloway said on January 14, 2004 12:13 PM:

Dino, there's a hotfix which makes this change in ASP.NET 1.1 - see http://support.microsoft.com/default.aspx?scid=kb;EN-US;823030

# Sergio Pereira said on January 14, 2004 12:14 PM:

DataGrids usually render huge amounts of HTML so this process, although feasible, could end up very costly with all the text parsing.
One other area to explore would be create a subclass of the TableCell control that renders TH instead of TD and during the ItemDataBound event of the grid transfer all the contents and properties/styles/attributes of each TableCell in the Header TableRow (or DataGridItem) to new instances of the new TableCell class.. Then remove the old tablecells from the row and add the new ones..

# Scott Galloway said on January 14, 2004 12:34 PM:

Incidentally, the hotfix package can only be obtained by calling support...why they can't just make the thing downloadable from ASP.NET is beyond me...Rob Howard - any particular reason?

# Jerry Pisk said on January 14, 2004 03:15 PM:

Shouldn't you also put the table header into the THEAD element for accessibility? And put the contents into a TBODY?

# TrackBack said on January 14, 2004 09:37 PM:
# sbc said on April 13, 2004 09:34 AM:

SO how to you render <th> tags instead of <td>? The article goes into far greater depth than needed, plus it works for IE only - other browser could easily handle it, and are often far superior to IE.

Also the code is in C# - how do you do it in VB.NET?

Leave a Comment

(required) 
(required) 
(optional)
(required)