The GridView is a new web control in ASP.NET 2.0 and is an improvement of the old
DataGrid. One of the biggest issues with the DataGrid was the lack of standard compliance
and accessibility. This has been fixed in the new GridView along with a lot of other
things as well.
When setting the property UseAccessibleHeader = true, it replaces the <td> elements
of the header row with the correct <th> which means table header. It
also adds the scope property of these header elements making them more accessible.
For some strange reason, there is no property for setting the <thead>, <tbody> and <tfoot> elements
which are more important from an accessibility point of view. There is however an
easy way of adding these elements in C# and VB.NET.
Let’s add a simple GridView to our page like this:
<asp:GridView
runat="server" ID="gvFlowers" />
To add the extra elements, we need this simple method in the code-behind:
private void MakeAccessible(GridView
grid)
{
if (grid.Rows.Count
> 0)
{
//This replaces <td> with <th> and adds the
scope attribute
grid.UseAccessibleHeader = true;
//This will add the <thead> and <tbody> elements
grid.HeaderRow.TableSection = TableRowSection.TableHeader;
//This adds the <tfoot> element. Remove if you don't have a footer row
grid.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
Then we just call the method from the Page_Load event like this:
protected void Page_Load(object sender, EventArgs e)
{
//Add
data to the GridView
...
MakeAccessible(gvFlowers);
}
And this is the actual HTML that is generated:
<table
cellspacing="0" rules="all" border="1" id="gvFlowers" style="border-collapse:collapse;">
<thead>
<tr>
<th
scope="col">Name</th><th
scope="col">Height</th><th
scope="col">Width</th>
</tr>
</thead><tbody>
<tr>
<td>tulip.jpg</td><td>30</td><td>420</td>
</tr><tr>
<td>daisy.jpg</td><td>32</td><td>481</td>
</tr><tr>
<td>rose.jpg</td><td>54</td><td>530</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>
It is not apparent that you have to dig into the header and footer rows and add a
TableSection. This should be done automatically or at least be easy to set through
a property at design time. I think it is an obvious mistake, but luckily for us, it
is easy to fix if you know where to look.
* $4.95/month BlogEngine.net Hosting – Click Here!