Group panel

2 posts, 0 answers
  1. Raymond
    Raymond avatar
    20 posts
    Member since:
    Jul 2014

    Posted 11 Oct Link to this post

    The group panel for drag and drop grouping at the top of the grid contains nested tables.  See sample markup below.  Those tables contain empty TH elements which are not displayed (display=none), but still generate errors by our WAI accessibility checker tool.  Is there a property I can set that will set the text for those TH elements?  I've set the 3 offending TH elements in bold below.

     

    Thanks,

     

    Ray

     

     

    <div id="ctl00_MasterHolder_rgdUsrReport_GroupPanel" style="width:100%;">
    <table id="ctl00_MasterHolder_rgdUsrReport_GroupPanel_TB" class="rgGroupPanel" summary="The table which holds all grouping nested tables and is used as a wrapper." style="width:100%;border-spacing:0;border-collapse:separate;" role="presentation">
    <caption>
    MainTable
    </caption><thead>
    <tr style="display:none;">
    <th scope="col"></th>
    </tr>
    </thead><tbody>
    <tr>
    <td><table summary="The nested grouping table which holds the group items table holding all grouped column items." style="width:100%;border-spacing:0;">
    <caption>
    Nested Grouping Table
    </caption><thead>
    <tr style="display:none;">
    <th scope="col"></th>
    </tr>
    </thead><tbody>
    <tr>
    <td><table cellpadding="2" summary="The table holding all group items which are positioned in the group panel." style="border-style:None;width:100%;border-spacing:0;">
    <caption>
    Group Items Table
    </caption><thead>
    <tr style="display:none;">
    <th scope="col"></th>
    </tr>
    </thead><tbody>
    <tr>
    <th scope="col" title="Drag out of the bar to ungroup" class="rgGroupItem" style="white-space: nowrap; cursor: move;">Data Collection Name&nbsp;<input type="button" name="ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl03" value=" " onclick="javascript:__doPostBack('ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl03','')" title="Sorted asc" class="rgSortAsc">&nbsp;<input type="button" name="ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl04" value=" " onclick="$find('ctl00_MasterHolder_rgdUsrReport').get_masterTableView()._ungroupByExpression('0:0'); return false;__doPostBack('ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl04','')" title="Click here to ungroup" class="rgUngroup"></th><td>-</td><th scope="col" title="Drag out of the bar to ungroup" class="rgGroupItem" style="white-space: nowrap; cursor: move;">Institution Name&nbsp;<input type="button" name="ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl06" value=" " onclick="javascript:__doPostBack('ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl06','')" title="Sorted asc" class="rgSortAsc">&nbsp;<input type="button" name="ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl07" value=" " onclick="$find('ctl00_MasterHolder_rgdUsrReport').get_masterTableView()._ungroupByExpression('0:1'); return false;__doPostBack('ctl00$MasterHolder$rgdUsrReport$GroupPanel$ctl07','')" title="Click here to ungroup" class="rgUngroup"></th><td style="width:100%;"></td>
    </tr>
    </tbody>
    </table></td>
    </tr>
    </tbody>
    </table></td>
    </tr>
    </tbody>
    </table>
    </div>

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 14 Oct Link to this post

    Hello,

    To prevent the errors you received you can try setting the Caption property of the Grid MasterTableView as shown in the respective accessibility demo:
    http://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/accessibility-compliance/defaultcs.aspx

    This value will be also used for populating the empty <th> element. Give it a try and let me know in case you still encounter any problems.

    Regards,
    Pavlina
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top