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

Keyboard Support

EmployeeIDLast NameFirst NameReports To 
12345678910...
Page size:
 15}Jay 
   100232315
   1012215
 17zzzssss new name56712121212 
  18ttttttttuuuaeric3jj 

  • 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 RadTreeList allows you to:

Focus

Focus the treelist through a user-specified key combination

Navigate

  • Up/Down - navigate through the treelist records
  • Page Up/Page Down - advance/return the pager

Expand/Collapse

  • Left Arrow + Right Arrow - Expand/Collapse child items

Select

  • Space - select treelist items
  • Ctrl + Shift - select multiple treelist items

Edit/Insert

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

To enable this feature you have to set the ClientSettings -> AllowKeyboardNavigation property of the treelist to true (it's default value is false).

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

The ClientSettings -> KeyboardNavigationSettings -> InitInsertKey propertie is used to provide shortcuts for opening RadTreeList insert form. The default values is Ctrl + I where the first key is preset to Ctrl by design.

The ClientSettings -> KeyboardNavigationSettings -> ExpandChildItemsKey and ClientSettings -> KeyboardNavigationSettings -> CollapseChildItemsKey properties are used to provide shortcuts for expanding or collapsing the active row's child items. The default values are Left Arrow Key + 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 to 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 ValidationSettings -> ValidationGroup property to the name of the group:

<ValidationSettings ValidationGroup ="CustomValidationGroup"/>

To allow the active row to cycle to the beginning upon having reached the end of the treelist 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
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.TreeListExamplesCSharp.KeyboardSupport.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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" />
<div class="demo-container no-bg">
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1"
        ParentDataKeyNames="ReportsTo" AllowPaging="true" PageSize="5" DataKeyNames="EmployeeID"
        AutoGenerateColumns="false" EditMode="PopUp" AllowRecursiveDelete="true" OnItemCreated="RadTreeList1_ItemCreated"
        OnPreRender="RadTreeList1_PreRender">
        <ClientSettings AllowKeyboardNavigation="true">
            <Selecting AllowItemSelection="true" AllowToggleSelection="true"></Selecting>
            <KeyboardNavigationSettings AllowActiveRowCycle="true" AllowSubmitOnEnter="true" CollapseChildItemsKey="LeftArrow" ExpandChildItemsKey="RightArrow"></KeyboardNavigationSettings>
        </ClientSettings>
        <Columns>
            <telerik:TreeListEditCommandColumn UniqueName="EditColumn" HeaderText="EditCommand Column" ButtonType="FontIconButton" HeaderStyle-Width="120px">
            </telerik:TreeListEditCommandColumn>
            <telerik:TreeListBoundColumn DataField="EmployeeID" UniqueName="EmployeeID1" HeaderText="EmployeeID" ReadOnly="true">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="Last
                Name"
                EditFormHeaderTextFormat="Last Name: ">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="First Name" EditFormHeaderTextFormat="First Name: ">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="ReportsTo" UniqueName="ReportsTo" HeaderText="Reports To" ForceExtractValue="Always" EditFormHeaderTextFormat="Reports to: " ReadOnly="true">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete" ButtonType="FontIconButton">
                <HeaderStyle Width="50px"></HeaderStyle>
            </telerik:TreeListButtonColumn>
        </Columns>
    </telerik:RadTreeList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName],  [ReportsTo]) VALUES (@LastName, @FirstName,@ReportsTo)" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName],   [HomePhone], [ReportsTo] FROM [Employees]" DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName,  [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <br />
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <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 Submit On Enter" Checked="true" AutoPostBack="true" OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox1" runat="server" Width="40px"
                                Mask="L" Text="Y" AutoPostBack="true" LabelWidth="80px" Label="Focus Key:" SelectionOnFocus="SelectAll"
                                OnTextChanged="RadMaskedTextBox1_TextChanged">
                            </qsf:MaskedTextBox></li>
                        <li>
                            <qsf:MaskedTextBox ID="RadMaskedTextBox2" runat="server" Width="40px"
                                Mask="L" Text="I" AutoPostBack="true" LabelWidth="100px" Label="InitInsert Key:" SelectionOnFocus="SelectAll"
                                OnTextChanged="RadMaskedTextBox2_TextChanged">
                            </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" Width="120px" Text="RightArrow" Label="Expand Key:" AutoPostBack="true" SelectionOnFocus="SelectAll" OnTextChanged="RadTextBox1_TextChanged">
                            </qsf:TextBox></li>
                        <li>
                            <qsf:TextBox ID="RadTextBox2" runat="server" Width="120px" Text="LeftArrow" Label="Collapse Key:" AutoPostBack="true" SelectionOnFocus="SelectAll" OnTextChanged="RadTextBox2_TextChanged">
                            </qsf:TextBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance