Grid - WAI-ARIA Support

Country  
CustomerIDCompanyNameContactNameCountryCityAddress
Page size:
 91 items in 10 pages
Country: Venezuela
 GROSRGROSELLA-RestauranteManuel PereiraVenezuelaCaracas5ª Ave. Los Palos Grandes
 HILAAHILARION-AbastosCarlos HernándezVenezuelaSan CristóbalCarrera 22 con Ave. Carlos Soublette #8-35
 LILASLILA-SupermercadoCarlos GonzálezVenezuelaBarquisimetoCarrera 52 con Ave. Bolívar #65-98 Llano Largo
 LINODLINO-DelicatesesFelipe IzquierdoVenezuelaI. de MargaritaAve. 5 de Mayo Porlamar
Country: USA (Showing 6 of 13 items. Group continues on the next page.)
 GREALGreat Lakes Food MarketHoward SnyderUSAEugene2732 Baker Blvd.
 HUNGCHungry Coyote Import StoreYoshi LatimerUSAElginCity Center Plaza 516 Main St.
 LAZYKLazy K Kountry StoreJohn SteelUSAWalla Walla12 Orchestra Terrace
 LETSSLet's Stop N ShopJaime YorresUSASan Francisco87 Polk St. Suite 5
 LONEPLonesome Pine RestaurantFran WilsonUSAPortland89 Chiaroscuro Rd.
 OLDWOOld World DelicatessenRene PhillipsUSAAnchorage2743 Bering St.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadGrid control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true".

  • DefaultCS.aspx
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowMultiRowSelection="true" AllowSorting="True" Width="100%"
            AllowPaging="true" ShowGroupPanel="true" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"
            EnableAriaSupport="true">
            <MasterTableView Width="100%" DataKeyNames="CustomerID">
                <GroupByExpressions>
                    <telerik:GridGroupByExpression>
                        <SelectFields>
                            <telerik:GridGroupByField FieldAlias="Country" FieldName="Country"></telerik:GridGroupByField>
                        </SelectFields>
                        <GroupByFields>
                            <telerik:GridGroupByField FieldName="Country" SortOrder="Descending"></telerik:GridGroupByField>
                        </GroupByFields>
                    </telerik:GridGroupByExpression>
                </GroupByExpressions>
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Country" HeaderText="Country">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="City" HeaderText="City">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Address" HeaderText="Address">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="true" Selecting-AllowRowSelect="true">
            </ClientSettings>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?