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

Keyboard Support

  • Collapse
  • Pin
  • Close

This RadDock is using the default shortcuts for its built-in commands:

ESC - Close
Ctrl+F11 - Toggle Expand / Collapse
Crtr+F12 - Toggle Pin / UnPin
  • Custom DockCommand
  • Custom ToggleCommand
  • Collapse
  • Pin
  • Close

This RadDock's shortcuts are explicitly defined in the control declaration.

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to move to and focus the control.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on the page".

In this example you can see how to dynamically configure AccessKey for the RadDock.

Focus

  • Alt + B - focus Dock1 (B is AccessKey)
  • Alt + H - focus Dock2 (H is AccessKey)

Default Shortcuts

  • ESC - Close
  • Ctrl + F11 - Toggle Expand / Collapse
  • Crtr + F12 - Toggle Pin / UnPin

Custom commands

  • Ctrl + Alt + E - Custom Dock command for Dock2
  • Ctrl + Alt + F - Custom Toggle command for Dock2
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.DynamicDocks.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</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 size-wide">
        <div style="width: 800px; background-color: #ccc;">
            <div style="width: 300px; float: left;">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px">
                    <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" AccessKey="B" CssClass="higherZIndex">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockPinUnpinCommand />
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                            <p>
                                This RadDock is using the default shortcuts for its built-in commands:
                            </p>
                            <strong>ESC</strong> - Close<br />
                            <strong>Ctrl+F11</strong> - Toggle Expand / Collapse<br />
                            <strong>Crtr+F12</strong> - Toggle Pin / UnPin<br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </div>
            <div style="width: 500px; float: left;">
                <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px">
                    <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" AccessKey="H" CssClass="higherZIndex">
                        <Commands>
                            <telerik:DockCloseCommand ShortCut="Esc" />
                            <telerik:DockPinUnpinCommand ShortCut="Ctrl+F12" />
                            <telerik:DockExpandCollapseCommand ShortCut="Ctrl+F11" />
                            <telerik:DockToggleCommand Name="customToggleCommand" Text="Custom ToggleCommand" OnClientCommand="onCustomToggleCommandHandler" ShortCut="Ctrl+Alt+F" />
                            <telerik:DockCommand Name="customDockCommand" Text="Custom DockCommand" OnClientCommand="onCustomDockCommandHandler" ShortCut="Ctrl+Alt+E" />
                        </Commands>
                        <ContentTemplate>
                            <p>
                                This RadDock's shortcuts are explicitly defined in the control declaration.
                            </p>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance