Keyboard Support
RadWindow supports keyboard shortcuts to invoke its commands. This is an accessibility feature as well as functionality that can make working with the application more convenient for the end user.
Shortcuts can be global for the RadWindowManager - for commands that affect all its child RadWindows such as Tile, RestoreAll, CloseAll.
Commands that are specific for each separate RadWindow such as Close, Minimize, Maximize must be declared for each separate RadWindow. They are only active if the RadWindow has focus.
There are three ways to specify these shortcuts. The more common two are: in the <Shortcuts>
inner tag:
Example 1: Set keyboard shortcuts in the markup.
<telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server">
<Shortcuts>
<telerik:WindowShortcut CommandName="RestoreAll" Shortcut="Alt+F3" />
<telerik:WindowShortcut CommandName="Tile" Shortcut="Alt+F6" />
<telerik:WindowShortcut CommandName="CloseAll" Shortcut="Esc" />
</Shortcuts>
<Windows>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" VisibleOnPageLoad="true"
NavigateUrl="https://www.telerik.com">
<Shortcuts>
<telerik:WindowShortcut CommandName="Maximize" Shortcut="Ctrl+F2" />
<telerik:WindowShortcut CommandName="Restore" Shortcut="Ctrl+F3" />
</Shortcuts>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
or via the Shortcuts server-side property:
Example 2: Set keyboard shortcuts in the code-behind.
RadWindow1.Shortcuts.Add("Close", "Esc");
//or
RadWindow1.Shortcuts.Add(new Telerik.Web.UI.WindowShortcut("Close", "Esc"));
Since Q2 2012 the RadWindow also offers the option to modify the shortcuts via JavaScript by using the following methods:
Example 3: Set keyboard shortcuts via JavaScript.
var oWnd = $find("RadWindow1"); //get a reference to the desired RadWindow
oWnd.addShortcut("Command", "shortcutString"); //adds the specified shortcut string to the given command
oWnd.removeShortcut("Command"); //removes the last shortcut for the given command
oWnd.getShortcutString("Command"); //returns the last shortcut for the given command
oWnd.isShortcutAdded("Command"); //returns true if a shortcut is added for this command
oWnd.removeAllShortcutsCommand("Command"); //clears all shortcuts for the given command
Shortcut modifications done via JavaScript will not be persisted if the control is disposed - either in an AJAX request, a full postback or via the DestroyOnClose functionality. These modifications are available only for a RadWindow instances and not for the RadWindowManager .
You should avoid globally used combinations such as Alt+F4, Ctrl+F5, etc. that have meaning in the context of the user browser/machine.
Here follows a list with the available commands:
for the RadWindowManager
Name | Executed command |
---|---|
CloseAll | Closes all opened RadWindows from the Windows Collection of the specific RadWindowManager |
MinimizeAll | Minimizes all opened RadWindows from the Windows Collection of the specific RadWindowManager |
RestoreAll | Restores all opened RadWindows from the Windows Collection of the specific RadWindowManager |
MaximizeAll | Maximizes all opened RadWindows from the Windows Collection of the specific RadWindowManager |
MinimizeActiveWindow | Minimizes the currently active (focused) RadWindow from the Windows Collection of the specific RadWindowManager |
RestoreActiveWindow | Restores the currently active (focused) RadWindow from the Windows Collection of the specific RadWindowManager |
CloseActiveWindow | Closes the currently active (focused) RadWindow from the Windows Collection of the specific RadWindowManager |
For each separate RadWindow
Name | Executed command |
---|---|
Minimize | Minimizes the RadWindow |
togglePin | Changes the Pinned property of the RadWindow to the opposite value (true/false) |
Close | Closes the RadWindow |
Maximize | Maximizes the RadWindow |
Reload | Reloads the RadWindow |
Handling Keyboard Shortcuts in the Content Page
To create a shortcut, RadWindow attaches a handler to the document where it is initialized (i.e., the page that opens it). In order for this handler to have effect over the RadWindow, the keyboard event must first bubble to the document. This cannot happen if the focus is in the content page of the RadWindow - the control should not modify the page to avoid breaking functionality created by the developer and pages from other domains will not allow this because of the same-origin policy browsers enforce.
To handle keyboard shortcuts in the content page, you must attach your own keyboard events and use the RadWindow's client-side API. Example 4 shows one way to close the RadWindow when the Esc
key is pressed.
Example 4: Use keyboard shortcuts in the content page.
$(document).keydown(function (e) {
if (e.keyCode == 27) { //the Esc key is pressed
e.preventDefault(); //optionally, cancel the event
GetRadWindow().close(); //close the RadWindow
}
});
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}