Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Grid / Keyboard Support

Next database reset in 0 hours, 59 minutes, 41 seconds

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

Add new recordRefresh
  CustomerIDContact NameCompany Address 
12345678910...
 Page 1 of 30, items 1 to 3 of 88.
ANATRAna TrujilloAna Trujillo Emparedados y heladosAvda. de la Constitución 2222
ANTONAntonio MorenoAntonio Moreno TaqueríaMataderos 2312
AROUTThomas HardyAround the Horn120 Hanover Sq.

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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.GridExamplesVBNET.Client.KeyboardNavigation.DefaultVB" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:headtag runat="server" id="Headtag2"></telerik:headtag>
        <!-- custom head section -->
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
      <telerik:header runat="server" id="Header1" navigationlanguage="VB" ShowDbResetTimer="true">
        </telerik:header>
        <telerik:RadScriptManager ID="RadScriptManager" runat="server">
        </telerik:RadScriptManager>
        <!-- content start -->
        <div class="bigModule">
            <div class="bigModuleBottom">
                <p>
                    Note that changing the shortcuts used for accessing RadGrid can tally with browser
                    shortcuts which have higher priority.
                </p>
            </div>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox3">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox3" />
                    </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" OnItemDeleted="RadGrid1_ItemDeleted"
                OnItemInserted="RadGrid1_ItemInserted" OnItemCreated="RadGrid1_ItemCreated" 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" />
                            </ParentTableRelation>
                            <DetailTables>
                                <telerik:GridTableView DataKeyNames="OrderID,ProductID" DataSourceID="SqlDataSource3"
                                    Width="100%" runat="server" CommandItemDisplay="Top" Name="Details">
                                    <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
                                    </ParentTableRelation>
                                    <Columns>
                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn1">
                                            <HeaderStyle Width="20px" />
                                            <ItemStyle CssClass="MyImageButton" />
                                        </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" />
                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                        </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" />
                                    <ItemStyle CssClass="MyImageButton" />
                                </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" />
                                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                </telerik:GridButtonColumn>
                            </Columns>
                            <SortExpressions>
                                <telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>
                            </SortExpressions>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                            <HeaderStyle Width="20px" />
                            <ItemStyle CssClass="MyImageButton" />
                        </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" />
                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                        </telerik:GridButtonColumn>
                    </Columns>
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>
                    </SortExpressions>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="true">
                <Selecting AllowRowSelect="true" />
                <KeyboardNavigationSettings EnableKeyboardShortcuts="true" AllowSubmitOnEnter="true" AllowActiveRowCycle="true" CollapseDetailTableKey="LeftArrow" ExpandDetailTableKey="RightArrow" />
            </ClientSettings>
              <ValidationSettings CommandsToValidate="PefrormInsert, Update" EnableValidation="true" />
            </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" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="CustomerID" Type="String" />
                    <asp:Parameter Name="CompanyName" Type="String" />
                    <asp:Parameter Name="ContactName" Type="String" />
                    <asp:Parameter Name="Address" Type="String" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="CompanyName" Type="String" />
                    <asp:Parameter Name="ContactName" Type="String" />
                    <asp:Parameter Name="Address" Type="String" />
                    <asp:Parameter Name="CustomerID" Type="String" />
                </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" />
                </SelectParameters>
                <DeleteParameters>
                    <asp:Parameter Name="OrderID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="CustomerID" Type="String" />
                    <asp:Parameter Name="EmployeeID" Type="Int32" />
                    <asp:Parameter Name="OrderDate" Type="DateTime" />
                    <asp:Parameter Name="RequiredDate" Type="DateTime" />
                    <asp:Parameter Name="ShippedDate" Type="DateTime" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="EmployeeID" Type="Int32" />
                    <asp:Parameter Name="OrderDate" Type="DateTime" />
                    <asp:Parameter Name="RequiredDate" Type="DateTime" />
                    <asp:Parameter Name="OrderID" Type="Int32" />
                </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" />
                </SelectParameters>
                <DeleteParameters>
                    <asp:Parameter Name="OrderID" Type="Int32" />
                    <asp:Parameter Name="ProductID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="OrderID" Type="Int32" />
                    <asp:Parameter Name="ProductID" Type="Int32" />
                    <asp:Parameter Name="UnitPrice" Type="Decimal" />
                    <asp:Parameter Name="Quantity" Type="Int16" />
                    <asp:Parameter Name="Discount" Type="Single" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="UnitPrice" Type="Decimal" />
                    <asp:Parameter Name="Quantity" Type="Int16" />
                    <asp:Parameter Name="Discount" Type="Single" />
                    <asp:Parameter Name="OrderID" Type="Int32" />
                    <asp:Parameter Name="ProductID" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
        <br />
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Expanded="true">
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
            <table>
                <tr>
                    <td style="width: 200px">
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Allow Active Row Cycle" Checked="true"
    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
                    </td>
                    <td style="width: 200px">
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Allow Multi Row Selection" Checked="true"
    AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged" />
                    </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="67px"
                            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="67px"
                            Text="Left Arrow" AutoPostBack="true" OnTextChanged="RadTextBox2_TextChanged" SelectionOnFocus="SelectAll">
                        </telerik:RadTextBox>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <!-- content end -->
        <telerik:footer runat="server" id="Footer1">
        </telerik:footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451