Telerik RadGrid Section 508 Compliance

Ever wonder how to make a pageable & sortable grid Section 508 compliant? Well with RadGrid this is trivial task! The tricky part is to tell the grid to not render or require any JavaScript on the page:

1. Inherit from RadGrid and override three methods:

    public class MyGrid : RadGrid
    {
        public MyGrid()
        {
            //
        }

        protected override void RegisterScriptControl()
        {
            // do not register as ScriptControl
        }

        protected override void RegisterScriptDescriptors()
        {
            // do not register script descriptors
        }

        protected override void RegisterCssReferences()
        {
            // do not register css references
        }
    }

2. Add the grid to your page, define header button type for all grid columns & pager template:

        <telerik:MyGrid ID="MyGrid1" Skin="Sunset" DataSourceID="LinqDataSource1" AllowPaging="true"
            AllowSorting="true" runat="server" OnColumnCreated="MyGrid1_ColumnCreated">
            <MasterTableView Caption="Customers" Summary="Customers">
                <PagerTemplate>
                    Change page: <asp:Button ID="Button1" ToolTip="Previous Page" CommandName="Page" CommandArgument="Prev" CssClass="rgPagePrev" runat="server" />
                    <asp:Button ID="Button2" ToolTip="Next Page" CommandName="Page" CommandArgument="Next" CssClass="rgPageNext" runat="server" />
                </PagerTemplate>
            </MasterTableView>
        </telerik:MyGrid>

    protected void MyGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        e.Column.HeaderButtonType = GridHeaderButtonType.PushButton;
    }

3. Make the grid pretty:

<link type="text/css" rel="stylesheet" href="Skins/Sunset/Grid.Sunset.css" />
<style type="text/css">
    .RadGrid_<%= MyGrid1.Skin %> th input
    {
        border:0px;
        background-color: Transparent;
        font-weight:bold;
        cursor: pointer;
        color:White;
        text-align:left;
    }
</style>

Enjoy!

Live Demo | Download