Dock - 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.

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.


  • 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<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>
    <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">
                            <telerik:DockCloseCommand />
                            <telerik:DockPinUnpinCommand />
                            <telerik:DockExpandCollapseCommand />
                                This RadDock is using the default shortcuts for its built-in commands:
                            <strong>ESC</strong> - Close<br />
                            <strong>Ctrl+F11</strong> - Toggle Expand / Collapse<br />
                            <strong>Crtr+F12</strong> - Toggle Pin / UnPin<br />
            <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">
                            <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" />
                                This RadDock's shortcuts are explicitly defined in the control declaration.

Find Assistance

Help Us Improve

Was this example helpful?