RadGrid complex nested table: how to code table using headers and id attributes

[Wei]

 Hi,

We used nested table in our radgrid to have a complex table structure ( Please see code below).

                   <telerik:GridTemplateColumn UniqueName="NoOfProviderColumnTemplate" HeaderStyle-Width="25%">
                        <HeaderStyle CssClass="rgHeader hasNestedTable" />
                        <HeaderTemplate>
                            <table class="nestedHeaderTable" cellspacing="0" datatable="0">
                                <tr>
                                    <td colspan="4" align="center"><b># of Providers</b></td>
                                </tr>
                                <tr>
                                    <td width="50%" align="center"><b>Required</b></td>
                                    <td width="50%" align="center"><b>Submitted</b></td>                                   
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemStyle CssClass="hasNestedTable" />
                        <ItemTemplate>
                            <table class="nestedItemTable" cellspacing="0">
                                <tr>
                                    <td width="50%" align="center"><%# DataBinder.Eval(Container.DataItem, "ProvidersRequired")%></td>
                                    <td width="50%" align="center"><%# DataBinder.Eval(Container.DataItem, "ProvidersActual")%></td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

In source code, radgrid renders code below:

<th scope="col" class="rgHeader hasNestedTable" style="font-weight: bold; text-align: center;">
                            <table class="nestedHeaderTable" datatable="0" cellspacing="0">
                                <tbody><tr>
                                    <td colspan="4" align="center"><b># of Providers</b></td>
                                </tr>
                                <tr>
                                    <td align="center" width="25%"><b>Required</b></td>

                                    <td align="center" width="25%"><b>Submitted</b></td>
                                     </tr>
                            </tbody></table>
</th>

A complex data table as it contains more than one logical level of headings. Currently the scoping technique (e.g. <th scope="col">) is being used to markup this data table when a more complex technique is required to properly associated each data cell to the appropriate headers. The way that the table is currently coded makes it extremely difficult for screen reader users to interpret its contents.

Our 508 team suggestions is list below:

1. Remove all scoping markup (e.g. remove all instances of <th scope="col">)

 2. Code the table using the headers and id attributes. For more information on how to implement this technique, refer to the following resources:

 WebAIM article:

 http://webaim.org/techniques/tables/data#id

 WCAG 2.0 Technique:

 http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.html

 

 3. Specify both column and row headers for the table.

Coz the th col scope is added by radgrid and there is no place for us to specify headers and id attributes, so I just want to ask if there is any solution to address this issue?

Thanks,
Wei

[Maria Ilieva]

Hi Wei,

Could I kindly ask you to gather all requirements for improvements regarding the RadGrid Section 508 Compliance into one document and post is as product feedback type of ticket? Therefore it will be easier for us to track all suggestion you have, pass them to our development team and discuss their possible implementation.

Thank you for your cooperation.

Kind regards,
Maria Ilieva
the Telerik team