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 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.

Comments

Tag:

Reddit | Furl

Bookmark WebProNews:

Mads Kristensen currently works as a Senior Developer at Traceworks located
in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in
2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and
web services in his daily work as well. A true .NET developer with great passion for the simple solution.

http://www.madskristensen.dk/