KeyboardNavigation.razor

@page "/file-manager/keyboard-navigation"

@using Syncfusion.Blazor.FileManager;


@inject IJSRuntime JsRuntime;

@*Hidden:Lines*@
@inherits SampleBaseComponent
@inject NavigationManager NavigationManager
<PageTitle>Blazor File Manager Keyboard Navigation Example - Syncfusion Demos</PageTitle>
<HeadContent>
	<meta name="description" content="This example demonstrates the Keyboard Navigation in Blazor File Manager Component. Explore here for more details." />
	<link rel="canonical" href="@canonicalURL" />
</HeadContent>
@*End:Hidden*@

<SampleDescription>
	<p>In the demonstrated example, the <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-file-manager'>Blazor File Manager </a> component's operations are made more accessible through the use of keyboard shortcuts, allowing for easy interaction with various key combinations and the functions of the File Manager.</p>
</SampleDescription>
<ActionDescription>
	<p>The following list presents the applicable key combinations and their corresponding functionalities.</p>
	<ul>
        <li>
            <b>Focus</b>
            <ul>
                <li>
					<span class="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
					<span> - Focuses on the first component of the sample.</span>
                </li>
            </ul>
        </li>
		<li>
			<b>Supported keys and user actions</b>			
			<ul>
				<li>
					<span class="key-class"><kbd>F5</kbd></span>
					<span> - Refresh the component.</span>
				</li>
				<li>
					<span class="key-class"><kbd>F2</kbd></span>
					<span> - Renames the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Space</kbd></span>
					<span> - Selects the focused item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Home</kbd></span>
					<span> - Selects the first item in the component.</span>
				</li>
				<li>
					<span class="key-class"><kbd>End</kbd></span>
					<span> - Selects the last item in the component.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Enter</kbd></span>
					<span> - Opens the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Del</kbd> or <kbd>Shift</kbd> + <kbd>Del</kbd></span>
					<span> - Deletes the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Alt</kbd> + <kbd>N</kbd></span>
					<span> - Creates a new folder.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>A</kbd></span>
					<span> - Selects all the items.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>D</kbd></span>
					<span> - Downloads the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>X</kbd></span>
					<span> - Cuts the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>C</kbd></span>
					<span> - Copies the selected item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>V</kbd></span>
					<span> - Pastes the copied items in the current path.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>U</kbd></span>
					<span> - Opens the file open window to upload an item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Alt</kbd> + <kbd>Enter</kbd></span>
					<span> - Provides the details of the selected items.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Home</kbd></span>
					<span> - Moves the focus to the first item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>End</kbd></span>
					<span> - Moves the focus to the last item.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>1</kbd></span>
					<span> - Changes the view to display the items in <code>Details view</code>.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>2</kbd></span>
					<span> - Changes the view to display the items in <code>LargeIcons view</code>.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Shift</kbd> + <kbd>Home</kbd> or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Home</kbd></span>
					<span> - Selects the files in between the last selected file and the first file in the component.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Shift</kbd> + <kbd>End</kbd> or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>End</kbd></span>
					<span> - Selects the files in between the last selected file and the first file in the component.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd> or <kbd>Shift</kbd> + <kbd>Space</kbd></span>
					<span> - Selects the currently focused item and items in between the currently focused item and last selected item.</span>
				</li>
			</ul>
		</li>
		<li>
			<b>Large Icons view</b>
			<ul>
				<li>
					<span class="key-class"><kbd>Arrow keys</kbd></span>
					<span> - Selects the item in the corresponding direction.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Arrow keys</kbd></span>
					<span> - Moves the focus to the item in the corresponding direction.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Shift</kbd> + <kbd>Arrow keys</kbd> or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Arrow keys</kbd></span>
					<span> - Selects the next item in the corresponding direction.</span>
				</li>
			</ul>
		</li>
		<li>
			<b>Details view</b>
			<ul>
				<li>
					<span class="key-class"><kbd>Up arrow</kbd> or <kbd>Down arrow</kbd></span>
					<span> - Selects the file in the corresponding direction.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Ctrl</kbd> + <kbd>Up arrow</kbd> or <kbd>Ctrl</kbd> + <kbd>Down arrow</kbd></span>
					<span> - Moves the focus to the next file in the corresponding direction.</span>
				</li>
				<li>
					<span class="key-class"><kbd>Shift</kbd> + <kbd>Up arrow</kbd> or <kbd>Shift</kbd> + <kbd>Down arrow</kbd></span>
					<span> - Selects the next file in the corresponding direction.</span>
				</li>
			</ul>
		</li>
	</ul>

</ActionDescription>

<div class="control-section">
	@* Initialization of default File Manager component *@
	<SfFileManager TValue="FileManagerDirectoryContent" ShowFileExtension="false">
		<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
								 UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
								 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
								 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
		</FileManagerAjaxSettings>
		<FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings>
		<FileManagerContextMenuSettings Layout="@LayoutItems" Visible="true"></FileManagerContextMenuSettings>
	</SfFileManager>
</div>

@*Hidden:Lines*@
@code {
    private string canonicalURL { get; set; }

    protected override void OnInitialized()
    {
        canonicalURL = NavigationManager.Uri.Split("?")[0];
    }
	public List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
	{
		new ToolBarItemModel() { Name = "NewFolder" },
		new ToolBarItemModel() { Name = "Cut" },
		new ToolBarItemModel() { Name = "Copy" },
		new ToolBarItemModel() { Name = "Paste" },
		new ToolBarItemModel() { Name = "Delete" },
		new ToolBarItemModel() { Name = "Rename" },
		new ToolBarItemModel() { Name = "SortBy" },
		new ToolBarItemModel() { Name = "Refresh" },
		new ToolBarItemModel() { Name = "Selection" },
		new ToolBarItemModel() { Name = "View" },
		new ToolBarItemModel() { Name = "Details" },
	};
    
    public string[] LayoutItems = new string[] { "SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll" };
}
@*End:Hidden*@
<style>
	/* Sample specific styles */
	.key-class {
        display: inline-block;
        width: 400px;
    }

	.bootstrap5 .e-filemanager .e-large-icons .e-list-img, .bootstrap5-dark .e-filemanager .e-large-icons .e-list-img,
	.bootstrap4 .e-filemanager .e-large-icons .e-list-img {
		border: none !important;
	}
</style>