shepherdweb.com

ASP.NET DataGrid Caption Element

October 22nd, 2005

ASP.NET 1.1 can generate accessible tables through DataGrid server control. This is not breaking news, but I want to put this out there because I had so much difficulty finding it. MS released a hotfix which made it possible to comply with Section 508. The new DataGrid properties are UseAccessibleHeader, Caption, and CaptionAlign. UseAccessibleHeader is a boolean property that is set to false by default. When set to true the DataGrid renders the table headers inside the <th> element with a scope=”col” element. The subsequent versions of ASP.NET 1.1 have this fix rolled in already.

Ok, so how about an example? You came to the right place…read on!

In your .aspx page:

<asp:datagrid runat="server" id="mydatagrid" useaccessibleheader="true" caption="My DataGrid">
<columns>
<asp:templatecolumn headertext="Column 1">
<itemtemplate>
<%# DataBinder.Eval(Container.DataItem, "myData1")%>
</itemtemplate>
</asp:templatecolumn>
<asp:templatecolumn headertext="Column 2">
<itemtemplate>
<%# DataBinder.Eval(Container.DataItem, "myData2")%>
</itemtemplate>
</asp:templatecolumn>
</columns>
</asp:datagrid>

Renders:

<table>
<caption>MyDataGrid</caption>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
</tr>
<tr>
<td><!--My Data 1...etc...--></td>
<td><!--My Data 2...etc...-></td>
</tr>
</table>

I hope this saves someone else all the searching I had to do. As usual, I welcome your feedback.

No Comments »

No comments yet.

Leave a comment

RSS feed for comments on this post.

TrackBack URI

Bad Behavior has blocked 670 access attempts in the last 7 days.