Quantcast

ASP.NET: Make GridView Control Accessible

Get the WebProNews Newsletter:
[ Business]

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.

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/

ASP.NET: Make GridView Control Accessible
About Mads Kristensen
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/ WebProNews Writer
Top Rated White Papers and Resources
  • Hristo

    a lot!!!

  • http://www.dotneturls.com Webdiyer

    Thank you very much!

  • Pete

    Can you add styles to the <thead> too?

    Like <thead class="myFunkyClass">

    Pete

    • Asasa

      did you find out how to add style or class?

      Thanks

  • HappyCamper

    That was awesome.

    You rock.

  • http://justgeeks.blogspot.com Brent

    Great job! This is exactly what I was looking for. Nicely written.

    Brent

  • Jon Williams

    Mads,

    This really helped me.

    I was struggling to get the JQuery tablesorter working because of the HTML produced by the GridView Control (not putting th tags inside the thead tags). It now works a treat.

    Many thanks,
    Jon

  • Francois YACOB (Yak)

    Hi,

    To implement CSS to the thead, tfoot, tbody, use CSS selector, for example create in your css file something like :

    .YourCssClass {
    ….
    }

    . YourCssClass > thead {
    ….
    }

    . YourCssClass > tfoot {
    ….
    }

    For information about Css selector, you can consult http://www.w3.org/TR/CSS2/selector.html

    Hope it helps,
    Francois

  • Erik J

    You should call MakeAccessible from the GridView’s PreRender event method.

  • Guest

    Thank you very much…

  • http://www.webcentralpa.com Harrisburg Websites

    Thanks a lot, this helped me with printing out a really long gridview table.

    It saved me from having to use Crystal Reports!

    Jon

  • http://www.cyberjetx.com liquid

    Thanks SO much. This is essential stuff that is still not default in .NET 3.5! [frown] Just wanted you to know that the info is as good on 3.5 and VS2010 as it was on 2.0 and VS2005.

    Thanks.