Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Keyboard Support

Next database reset in 1 hours, 3 minutes, 49 seconds

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

Command item
Command item
Add new recordRefresh
  CustomerIDContact NameCompany Address 
Data pager
Data pager
 Page 1 of 31, items 1 to 3 of 93.
01 32 
1 32 
ANATRAna TrujilloAna Trujillo Emparedados y heladosAvda. de la Constitución 2222

Configurator
Focus Key:  
Rebind Key:  
InitInsert Key:  
Expand Key:   Collapse Key:  
The keyboard navigation feature of Telerik RadGrid allows you to:
  • Focus the grid through a user-specified key combination
  • Navigate through the grid records using the [UP/DOWN] arrow keys from the keyboard
  • Advance/return the pager through the [PAGE UP]/[PAGE DOWN] key
  • Select grid items pressing the [SPACE] key
  • Select multiple grid item using the [CTRL] and [SHIFT] keys
  • Insert a new item by hitting [CTRL] and [I] keys
  • Edit rows upon hitting the [ENTER] key
  • Update/insert rows upon hitting the [ENTER] key
  • Exit EDIT/INSERT mode upon hitting the [ESC] key
  • Expand/Collapse detail tables using the [Left Arrow] and [Right Arrow] keys

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

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.
C# VB
Show code in new window Demo isolation steps
<%@ 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 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>Keyboard navigation in GridView for ASP.NET AJAX | RadGrid demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <qsf:InformationBox ID="qsfInfo" runat="server">
        <div>
            <div>
                <p>
                    Note that changing the shortcuts used for accessing RadGrid can tally with browser
                    shortcuts which have higher priority.
                </p>
            </div>
        </div>
    </qsf:InformationBox>
    <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="CheckBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="CheckBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox2"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox3">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox3"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="true"
        AutoGenerateColumns="False" PageSize="3" AllowSorting="True" AllowMultiRowSelection="true"
        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"
            Width="100%" CommandItemDisplay="Top" Name="Customers">
            <DetailTables>
                <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2" HierarchyLoadMode="Client"
                    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>
    <br />
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
        Expanded="true">
        <table>
            <tr>
                <td style="width: 200px">
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="Allow Active Row Cycle" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                </td>
                <td style="width: 200px">
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Allow Multi Row Selection" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                </td>
            </tr>
            <tr>
                <td>
                    Focus Key: &nbsp;
                    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server" Width="40px" Mask="L"
                        Text="Y" AutoPostBack="true" OnTextChanged="RadMaskedTextBox1_TextChanged" SelectionOnFocus="SelectAll">
                    </telerik:RadMaskedTextBox>
                </td>
                <td>
                    Rebind Key: &nbsp;
                    <telerik:RadMaskedTextBox ID="RadMaskedTextBox2" runat="server" Width="40px" Mask="L"
                        Text="R" AutoPostBack="true" OnTextChanged="RadMaskedTextBox2_TextChanged" SelectionOnFocus="SelectAll">
                    </telerik:RadMaskedTextBox>
                </td>
                <td style="width: 200px">
                    InitInsert Key: &nbsp;
                    <telerik:RadMaskedTextBox ID="RadMaskedTextBox3" runat="server" Width="40px" Mask="L"
                        Text="I" AutoPostBack="true" OnTextChanged="RadMaskedTextBox3_TextChanged" SelectionOnFocus="SelectAll">
                    </telerik:RadMaskedTextBox>
                </td>
                <td style="width: 200px">
                    Expand Key: &nbsp;
                    <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="85px" Text="Right Arrow"
                        AutoPostBack="true" OnTextChanged="RadTextBox1_TextChanged" SelectionOnFocus="SelectAll">
                    </telerik:RadTextBox>
                </td>
                <td style="width: 200px">
                    Collapse Key: &nbsp;
                    <telerik:RadTextBox ID="RadTextBox2" runat="server" Width="85px" Text="Left Arrow"
                        AutoPostBack="true" OnTextChanged="RadTextBox2_TextChanged" SelectionOnFocus="SelectAll">
                    </telerik:RadTextBox>
                </td>
            </tr>
        </table>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>