FileExplorer - Keyboard Support

  • Open
  • Delete
  • Rename
  • New Folder
  • Upload
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • Upload
  •  images
    •  Northwind
  • Delete
  • Rename
  • New Folder
  • Upload
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
Table that lists the contents of the current directory
Page 1 of 2
Page 1 of 2. Items 1 to 6 of 11
Max file size allowed:
200.00 KB
File extensions allowed:
*.jpg, *.jpeg, *.gif, *.png
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how you can use the keyboard to control RadFileExplorer. The user can specify a shortcut (FocusFileExplorer property)  that focuses the control, or use the Tab key to bring the focus to it. Once, the Explorer is focused, pressing the Tab key (or Shift+Tab) will navigate through its inner controls - ToolBar, TreeView and Grid. Additionally, shortcuts can be assigned to each of these controls, so they can be accessed directly. The FileExplorer needs to be focused first, in order for the rest of the shortcuts to work.

There are only a few predefined shortcuts:

  • "Enter" - open selected file or folder in the TreeView or Grid.
  • "Esc" - close opened Popup Window
  • "Delete" - delete selected file, folder in the Grid or TreeView. Note, that you need to press "Enter" to select a folder in the TreeView.
  • "(Context) Menu Key [in this example another shortcut is used instead of the default one]" - open/close the Context Menu of the TreeView or the Grid, close to the selected file or folder.
  • "Arrow Keys" - used to navigate through the items in the TreeView, Grid and the Context Menu.

The rest are not set, because different browsers might have the shortcut already set for internal (browser) use. The user is free to specify the shortcut to a single key, or a combination of two (2) keys, using the "+" (plus) sign. Please take a look at the markup of the example to see how the shortcuts of the FileExplorer in this demo are set.

Instructions

Press "Ctrl + F2" to focus the FileExplorer. After that you can use the control specific keyboard shortcuts (listed below) to focus the different controls of the FileExplorer.

  • Shift + 1 - focuses the ToolBar, after that you can use Tab to navigate through toolbar buttons if their keyboard navigation is enabled (the AccessKey of each button must be set).
  • Shift + 2 - focuses the AddressBar.
  • Shift + 3 - focuses the TreeView, after that you can use ArrowUp / ArrowDown keys to navigate through different nodes. Press Enter to select a node.
  • Shift + 4 - focues the Grid, after that you can use ArrowUp / ArrowDown keys to navigate through different items. Press Enter to select an item.
  • Shift + 5 - focuese Grid Pager, after that you can use ArrowLeft / ArrowRight keys to change pages.
  • Shift + M - opens ContextMenu on the selected item. Use ArrowUp / ArrowDown keys to navigate through the menu and Enter to invoke an action.
  • Esc - closes opened dialog.
  • Ctrl + N - opens Create New Folder dialog.
  • Ctrl + U - opens Upload dialog.
  • Ctrl + F3 - refreshes the content of the FileExplorer.
  • Ctrl + K - navigates back one view.
  • Ctrl + L - navigates forward one view.
  • Del - deletes selected item.

Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FileExplorer.KeyboardSupport.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <div class="demo-container size-medium">
        <telerik:RadFileExplorer RenderMode="Lightweight" runat="server" ID="FileExplorer1" Width="595px" Height="320px"
            CssClass="rfeFocus" AllowPaging="true" PageSize="6">
            <Configuration ViewPaths="~/FileExplorer/Examples/Overview/images" UploadPaths="~/FileExplorer/Examples/Overview/images"
                DeletePaths="~/FileExplorer/Examples/Overview/images"></Configuration>
            <KeyboardShortcuts FocusFileExplorer="Ctrl+f2" FocusToolBar="Shift+1" FocusAddressBar="Shift+2"
                FocusTreeView="Shift+3" FocusGrid="Shift+4" FocusGridPagingSlider="Shift+5" UploadFile="Ctrl+u"
                Back="Ctrl+k" Forward="Ctrl+l" NewFolder="Ctrl+n" Refresh="Ctrl+f3" ContextMenu="Shift+m"></KeyboardShortcuts>
        </telerik:RadFileExplorer>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?