New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Support

Next database reset in 0 hours, 33 minutes, 13 seconds
  CustomerIDContact NameCompany Address 
asas huh?aa 
  • Demo Configurator



Keyboard Support

Note: Changing the shortcuts used for accessing RadGrid can tally with browser shortcuts which have higher priority.

The keyboard navigation feature of Telerik RadGrid allows you to:

Focus

  • Focus the grid through a user-specified key combination

Navigate

  • Up Arrow/Down Arrow - navigate through the grid records
  • Page up/Page down - advance/return the pager

Select

  • Space - select grid items
  • Ctrl + Shift - select multiple grid item

Edit/Insert

  • Ctrl + I - insert a new item
  • Enter - edit rows
  • Enter - update/insert rows
  • Esc - exit EDIT/INSERT mode

Expand/Collapse

  • Left Arrow + Right Arrow - Expand/Collapse detail tables

To enable this feature you have to set the ClientSettings -> AllowKeyboardNavigation property of the grid to true (it's default value is false). The grid also features an additional property ClientSettings -> KeyboardNavigationSettings -> EnableKeyboardShortcuts which when set to false will disable all keyboard navigation shortcuts except for the Up/Down and Page Up]/Page Down keys. This is done with a view to facilitating the developer if he intends to implement his own scenario if the above-listed keys (with the exceptions mentioned) have been pressed.

To specify the key combination that focuses the grid you need to set the ClientSettings -> KeyboardNavigationSettings -> FocusKey - the first key is preset to Ctrl by design.

The ClientSettings -> KeyboardNavigationSettings -> InitInsertKey and ClientSettings -> KeyboardNavigationSettings -> RebindKey properties are used to provide shortcuts for opening RadGrid insert form and for rebinding RadGrid. The default values are Ctrl + I and Ctrl + R respectively where the first key is preset to Ctrl by design.

The ClientSettings -> KeyboardNavigationSettings -> ExpandDetailTableKey and ClientSettings -> KeyboardNavigationSettings -> CollapseDetailTableKey properties are used to provide shortcuts for expanding or collapsing the active row's detail table. The default values are Left Arrow Key and Right Arrow Key. Upon changing these values, you will need to hold Shift down for the new keys to take effect.

To enable the Update/Insert rows by hitting the Enter key feature you have to set the KeyboardNavigationSettings -> AllowSubmitOnEnter property to True. Also enable the validation when AllowSubmitOnEnter is set to True you have to set the ValidationSettings -> EnableValidation to True and specify which command needs validation through CommandsToValidate property:

<ValidationSettings CommandsToValidate="PefrormInsert, Update" EnableValidation="true" />

To validate a secific validation group you have to set the KeyboardNavigationSettings -> ValidationGroup property to the name of the group:

<KeyboardNavigationSettings EnableKeyboardShortcuts="true" AllowSubmitOnEnter="true" ValidationGroup="CustomValidatioGroup" />

To allow the active row to cycle to the beginning upon having reached the end of the grid table, you have to set ClientSettings -> KeyboardNavigationSettings -> AllowActiveRowCycle property to true.

The keyboard navigation is especially useful when you do not want your user to be dependand on mouse clicks when interacting with the control. It is designed in par with the Section 508 accessibility standards.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.AccessibilityAndInternationalization.KeyboardSupport.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"
                        LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" EnableRoundedCorners="false" DecoratedControls="All" />
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="true"
            AutoGenerateColumns="False" PageSize="3" AllowSorting="True" AllowMultiRowSelection="true" OnPreRender="RadGrid1_PreRender"
            AllowPaging="True" GridLines="None" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
            AllowAutomaticUpdates="True" OnItemUpdated="RadGrid1_ItemUpdated" OnItemCreated="RadGrid1_ItemCreated"
            OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted" OnInsertCommand="RadGrid1_InsertCommand">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID" AllowMultiColumnSorting="True" HierarchyLoadMode="ServerBind"
                Width="100%" CommandItemDisplay="Top" Name="Customers">
                <DetailTables>
                    <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" HierarchyLoadMode="ServerBind"
                        Width="100%" runat="server" CommandItemDisplay="Top" Name="Orders">
                        <ParentTableRelation>
                            <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID"></telerik:GridRelationFields>
                        </ParentTableRelation>
                        <DetailTables>
                            <telerik:GridTableView DataKeyNames="OrderID,ProductID" DataSourceID="SqlDataSource3"
                                Width="100%" runat="server" CommandItemDisplay="Top" Name="Details">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                                </ParentTableRelation>
                                <Columns>
                                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn1">
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        <ItemStyle CssClass="MyImageButton"></ItemStyle>
                                    </telerik:GridEditCommandColumn>
                                    <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                        DataField="OrderID" UniqueName="OrderID" ReadOnly="true" Visible="false">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="ProductID" HeaderText="ProductID" HeaderButtonType="TextButton"
                                        DataField="ProductID" UniqueName="ProductID">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                        DataField="UnitPrice" UniqueName="UnitPrice">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity" UniqueName="Quantity">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                        DataField="Discount" UniqueName="Discount">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton"
                                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn1">
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                                    </telerik:GridButtonColumn>
                                </Columns>
                                <SortExpressions>
                                    <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                                </SortExpressions>
                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn2">
                                <HeaderStyle Width="20px"></HeaderStyle>
                                <ItemStyle CssClass="MyImageButton"></ItemStyle>
                            </telerik:GridEditCommandColumn>
                            <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                DataField="OrderID" UniqueName="OrderID" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                                DataField="OrderDate" UniqueName="OrderDate">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="RequiredDate" HeaderText="RequiredDate"
                                HeaderButtonType="TextButton" DataField="RequiredDate" UniqueName="RequiredDate">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                                DataField="EmployeeID" UniqueName="EmployeeID">
                            </telerik:GridBoundColumn>
                            <telerik:GridButtonColumn ConfirmText="Delete these details record?" ButtonType="ImageButton"
                                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn2">
                                <HeaderStyle Width="20px"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                            </telerik:GridButtonColumn>
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                        </SortExpressions>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                        DataField="CustomerID" UniqueName="CustomerID" MaxLength="5">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                        DataField="ContactName" UniqueName="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                        DataField="CompanyName" UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Address" HeaderText="Address" HeaderButtonType="TextButton"
                        DataField="Address" UniqueName="Address">
                    </telerik:GridBoundColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this customer?" ButtonType="ImageButton"
                        CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                    </telerik:GridButtonColumn>
                </Columns>
                <SortExpressions>
                    <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
                </SortExpressions>
            </MasterTableView>
            <ClientSettings AllowKeyboardNavigation="true">
                <Selecting AllowRowSelect="true"></Selecting>
                <KeyboardNavigationSettings EnableKeyboardShortcuts="true" AllowSubmitOnEnter="true"
                    AllowActiveRowCycle="true" CollapseDetailTableKey="LeftArrow" ExpandDetailTableKey="RightArrow"></KeyboardNavigationSettings>
            </ClientSettings>
            <ValidationSettings CommandsToValidate="PefrormInsert, Update" EnableValidation="true"></ValidationSettings>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [Address]) VALUES (@CustomerID, @CompanyName, @ContactName, @Address)"
            SelectCommand="SELECT * FROM [Customers]" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [Address] = @Address WHERE [CustomerID] = @CustomerID">
            <DeleteParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Address" Type="String"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                <asp:Parameter Name="Address" Type="String"></asp:Parameter>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID" InsertCommand="INSERT INTO [Orders] ([CustomerID], [EmployeeID], [OrderDate], [RequiredDate]) VALUES (@CustomerID, @EmployeeID, @OrderDate, @RequiredDate)"
            SelectCommand="SELECT * FROM [Orders] WHERE [CustomerID] = @CustomerID" UpdateCommand="UPDATE [Orders] SET [EmployeeID] = @EmployeeID, [OrderDate] = @OrderDate, [RequiredDate] = @RequiredDate WHERE [OrderID] = @OrderID">
            <SelectParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
            </SelectParameters>
            <DeleteParameters>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="OrderDate" Type="DateTime"></asp:Parameter>
                <asp:Parameter Name="RequiredDate" Type="DateTime"></asp:Parameter>
                <asp:Parameter Name="ShippedDate" Type="DateTime"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="OrderDate" Type="DateTime"></asp:Parameter>
                <asp:Parameter Name="RequiredDate" Type="DateTime"></asp:Parameter>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Order Details] WHERE [OrderID] = @OrderID AND [ProductID] = @ProductID"
            InsertCommand="INSERT INTO [Order Details] ([OrderID], [ProductID], [UnitPrice], [Quantity], [Discount]) VALUES (@OrderID, @ProductID, @UnitPrice, @Quantity, @Discount)"
            SelectCommand="SELECT * FROM [Order Details] WHERE [OrderID] = @OrderID" UpdateCommand="UPDATE [Order Details] SET [UnitPrice] = @UnitPrice, [Quantity] = @Quantity, [Discount] = @Discount WHERE [OrderID] = @OrderID AND [ProductID] = @ProductID">
            <SelectParameters>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
            </SelectParameters>
            <DeleteParameters>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
                <asp:Parameter Name="Quantity" Type="Int16"></asp:Parameter>
                <asp:Parameter Name="Discount" Type="Single"></asp:Parameter>
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="UnitPrice" Type="Decimal"></asp:Parameter>
                <asp:Parameter Name="Quantity" Type="Int16"></asp:Parameter>
                <asp:Parameter Name="Discount" Type="Single"></asp:Parameter>
                <asp:Parameter Name="OrderID" Type="Int32"></asp:Parameter>
                <asp:Parameter Name="ProductID" Type="Int32"></asp:Parameter>
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"
        Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" runat="server" Text="Allow Active Row Cycle" Checked="true"
                                    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" runat="server" Text="Allow Multi Row Selection" Checked="true"
                                    AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox1" Size="Narrow" runat="server" Label="Focus Key" Mask="L"
                                Text="Y" AutoPostBack="true" RenderMode="Lightweight" OnTextChanged="RadMaskedTextBox1_TextChanged" SelectionOnFocus="SelectAll">
                            </qsf:MaskedTextBox>
                            <br />

                        </li>
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox2" Size="Narrow" runat="server" Mask="L" Label="Rebind Key"
                                Text="R" AutoPostBack="true" RenderMode="Lightweight" OnTextChanged="RadMaskedTextBox2_TextChanged" SelectionOnFocus="SelectAll">
                            </qsf:MaskedTextBox>
                            <br />

                        </li>
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox3" runat="server" Size="Narrow" Mask="L" Label="InitInsert Key"
                                Text="I" AutoPostBack="true" RenderMode="Lightweight" OnTextChanged="RadMaskedTextBox3_TextChanged" SelectionOnFocus="SelectAll">
                            </qsf:MaskedTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:TextBox ID="RadTextBox1" runat="server" Size="Wide" Text="RightArrow" Label="Expand Key"
                                AutoPostBack="true" RenderMode="Lightweight" OnTextChanged="RadTextBox1_TextChanged" SelectionOnFocus="SelectAll">
                            </qsf:TextBox>
                            <br />

                        </li>
                        <li>
                            <qsf:TextBox ID="RadTextBox2" runat="server" Size="Wide" Text="LeftArrow" Label="Collapse Key"
                                AutoPostBack="true" RenderMode="Lightweight" OnTextChanged="RadTextBox2_TextChanged" SelectionOnFocus="SelectAll">
                            </qsf:TextBox>

                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance