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

Keyboard Navigation

Event log
  • Demo Configurator
  • Choose commandClose
    Choose shortcut:Shift+C

The RadWindow supports now keyboard shortcuts for its commands. Shortcuts can be used as an accessibility feature, or to make the work of the user more convenient. Shortcuts can be used to switch between active windows, to maximize or close the current active window, and other tasks.

This test demo has the following shortcuts specififed for demonstration purposes:

RadWindow with NavigateUrl="http://www.w3.org/":

  • Ctrl + F2 Maximize Window
  • Ctrl + F3 Restore Window

Shortcuts can be specified in the markup as shown in the demo or on the srever e.g as shown below:

RadWindow1.Shortcuts.Add("Close", "Esc");
or
RadWindow1.Shortcuts.Add(new Telerik.Web.UI.WindowShortcut("Close", "Esc");

Since Q2 2012 shortcuts can be manipulated dynamically via JavaScript as well. The main methods are:

  • addShortcut() - takes two strings - the command and the shortcut to add it for the RadWindow
  • removeAllShortcutsCommand() - removes shortcuts for the command that is passed as a string parameter

The command names are not case-sensitive and if such a command exists, it will be fired for the currently active RadWindow or for all windows in a manager if this the case.

This RadWindow demo shows how to add keyboard support for Telerik's ASP.NET PopUp Window component. Note, that the shortcut command is fired for a RadWindow only when the RadWindow is active. Commands, related to all windows in a RadWindowManager such as Tile, operate with all the windows which belong to the manager.

NEW - since Q2 2012 shortcuts for a RadWindow can be modified via JavaScript.

In the demo configurator RadWindow's shortcuts can be chosen via the dropdowns and buttons. The full list of commands is available in the related help article and the available key combinations are chosen for the sake of simplicity and are not limited to the ones in the dropdown.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-containers">
        <div class="demo-container" id="offsetElement1"><button id="firstWindowOpenerElem">Open the first dialog</button></div>
        <div class="demo-container" id="offsetElement2"><button id="secondWindowOpenerElem">Open the second dialog</button></div>
    </div>
    <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true" Style="z-index: 50000;">
        <Shortcuts>
            <telerik:WindowShortcut CommandName="RestoreAll" Shortcut="Alt+F3"></telerik:WindowShortcut>
            <telerik:WindowShortcut CommandName="Tile" Shortcut="Alt+F6"></telerik:WindowShortcut>
            <telerik:WindowShortcut CommandName="CloseAll" Shortcut="Esc"></telerik:WindowShortcut>
        </Shortcuts>
        <Windows>
            <telerik:RadWindow RenderMode="Lightweight" OffsetElementID="offsetElement1" ID="RadWindowDynamicShortcuts" runat="server" Width="320" VisibleOnPageLoad="true" Left="30" Top="30" OpenerElementID="firstWindowOpenerElem">
                <ContentTemplate>
                    <span style="font-size: 16px;">Add a shortcut through the dropdowns for this RadWindow.
                        This is done via JavaScript
                        and will not be in effect if the RadWindow is disposed. If this happens the available
                        shortcuts are the ones defined for the RadWindowManager. </span>
                    <asp:Image ID="img" runat="server" Style="margin-top: 10px; width: 220px; height: 46px;" ImageUrl="~/Window/TestPage/TestPageResources/RadWindow.gif"
                               alt=""></asp:Image>
                </ContentTemplate>
            </telerik:RadWindow>
            <telerik:RadWindow RenderMode="Lightweight" OffsetElementID="offsetElement2" ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Width="320" NavigateUrl="http://www.w3.org/" Left="30" Top="30" OpenerElementID="secondWindowOpenerElem">
                <Shortcuts>
                    <telerik:WindowShortcut CommandName="Maximize" Shortcut="Ctrl+F2"></telerik:WindowShortcut>
                    <telerik:WindowShortcut CommandName="Restore" Shortcut="Ctrl+F3"></telerik:WindowShortcut>
                </Shortcuts>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" />
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                            <qsf:DropDownList ID="CommandsDropdown" Label="Choose command" runat="server" Size="Medium" OnClientLoad="commands_load">
                                <Items>
                                    <telerik:DropDownListItem Text="Close" />
                                    <telerik:DropDownListItem Text="Maximize" />
                                    <telerik:DropDownListItem Text="Minimize" />
                                </Items>
                            </qsf:DropDownList>
                        </qsf:ConfiguratorColumn>
                        <qsf:ConfiguratorColumn runat="server">
                            <qsf:DropDownList ID="ShortcutsDropdown" Label="Choose shortcut:" runat="server" OnClientLoad="shortcuts_load">
                                <Items>
                                    <telerik:DropDownListItem Text="Shift+C" />
                                    <telerik:DropDownListItem Text="M" />
                                    <telerik:DropDownListItem Text="N" />
                                </Items>
                            </qsf:DropDownList>
                        </qsf:ConfiguratorColumn>
                    </li>
                    <li>
                        <qsf:Button ID="Button1" Text="Add shortcut" OnClientClicked="createRwDynamicShortcuts" runat="server" AutoPostBack="false" />
                        <qsf:Button ID="Button2" Text="Remove shortcut" OnClientClicked="removeShortcuts" runat="server" AutoPostBack="false" />
                        <qsf:Button ID="Button3" Text="Show shortcut" OnClientClicked="alertShortcuts" runat="server" AutoPostBack="false" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance