File Manager - Toolbar and Context Menu

The FileManager control provides the following UI customization properties:

The toolbar property specifies the toolbar's visibility and available commands.
The contextMenu property specifies the context menu's availability and its commands.

The toolbar and context menu support context-invariant and context-sensitive items that can be visible or hidden depending on user action.

Backend API

@(Html.DevExtreme().FileManager() .ID("file_manager") .FileSystemProvider(new JS("fileSystem")) .Permissions(permissions => permissions .Create(true) .Delete(true) .Rename(true) .Download(true)) .Height(450) .ItemView(itemView => { itemView.Details(details => { details.Columns(columns => { columns.Add().DataField("thumbnail"); columns.Add().DataField("name"); columns.Add().DataField("category").Caption("Category").Width(95); columns.Add().DataField("dateModified"); columns.Add().DataField("size"); }); }) .ShowParentFolder(false); }) .Toolbar(toolbar => { toolbar.Items(items => { items.Add().Name(FileManagerToolbarItem.ShowNavPane).Visible(true); items.Add().Name(FileManagerToolbarItem.Separator); items.Add().Name(FileManagerToolbarItem.Create); items.Add() .Widget(widget => widget.Menu() .Items(menuItems => { menuItems.Add() .Text("Create new file") .Icon("plus") .Items(subItems => { subItems.Add() .Text("Text Document"); subItems.Add() .Text("RTF Document"); subItems.Add() .Text("Spreadsheet"); }); }) .OnItemClick("onItemClick")) .Location(ToolbarItemLocation.Before); items.Add().Name(FileManagerToolbarItem.Refresh); items.Add().Name(FileManagerToolbarItem.Separator).Location(ToolbarItemLocation.After); items.Add().Name(FileManagerToolbarItem.SwitchView); }); toolbar.FileSelectionItems(items => { items.Add().Name(FileManagerToolbarItem.Rename); items.Add().Name(FileManagerToolbarItem.Separator); items.Add().Name(FileManagerToolbarItem.Delete); items.Add().Name(FileManagerToolbarItem.Separator); items.Add() .Widget(widget => widget.Menu() .Items(menuItems => { menuItems.Add() .Text("Category") .Icon("tags") .Items(subItems => { subItems.Add() .Text("Work"); subItems.Add() .Text("Important"); subItems.Add() .Text("Home"); subItems.Add() .Text("None"); }); }) .OnItemClick("onItemClick")) .Location(ToolbarItemLocation.Before); items.Add().Name(FileManagerToolbarItem.Refresh); items.Add().Name(FileManagerToolbarItem.ClearSelection); }); }) .OnContextMenuItemClick("onItemClick") .ContextMenu(contextMenu => { contextMenu.Items(items => { items.Add().Name(FileManagerContextMenuItem.Create); items.Add() .Text("Create new file") .Icon("plus") .Items(subItems => { subItems.Add() .Text("Text Document"); subItems.Add() .Text("RTF Document"); subItems.Add() .Text("Spreadsheet"); }); items.Add() .Name(FileManagerContextMenuItem.Rename) .BeginGroup(true); items.Add().Name(FileManagerContextMenuItem.Delete); items.Add() .Text("Category") .Icon("tags") .Items(subItems => { subItems.Add() .Text("Work"); subItems.Add() .Text("Important"); subItems.Add() .Text("Home"); subItems.Add() .Text("None"); }) .BeginGroup(true); items.Add().Name(FileManagerContextMenuItem.Refresh); }); }) ) <script type="text/javascript"> function onItemClick(args) { var fileManager = getFileManager(); var { extension, category } = getItemInfo(args.itemData.text); if(extension) { updated = createFile(extension, args.fileSystemItem); } else if(category !== undefined) { updated = updateCategory(category, args.fileSystemItem, args.viewArea); } if(updated) { fileManager.refresh(); } } function createFile(fileExtension, directory) { var fileManager = getFileManager(); var newItem = { __KEY__: Date.now(), name: "New file" + fileExtension, isDirectory: false, size: 0 }; directory = directory || fileManager.getCurrentDirectory(); if(!directory.isDirectory) { return false; } var array = null; if(!directory.dataItem) { array = fileSystem; } else { array = directory.dataItem.items; if(!array) { directory.dataItem.items = array = []; } } array.push(newItem); return true; } function updateCategory(newCategory, directory, viewArea) { var fileManager = getFileManager(); var items = null; if(viewArea === "navPane") { items = [directory]; } else { items = fileManager.getSelectedItems(); } items.forEach(function(item) { if(item.dataItem) { item.dataItem.category = newCategory; } }); return items.length > 0; } function getFileManager() { return $("#file_manager").dxFileManager("instance"); } </script> <script src="~/data/fileSystem.js"></script>

using DevExtreme.NETCore.Demos.Models.FileManagement; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class FileManagerController : Controller { public IActionResult UICustomization() { return View(); } } }

var fileSystem = [ { name: "Documents", isDirectory: true, category: "Work", items: [ { name: "Projects", isDirectory: true, category: "Work", items: [ { name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, category: "Important", size: 2048 } ] }, { name: "About.xml", isDirectory: false, size: 1024 }, { name: "Managers.rtf", isDirectory: false, size: 2048 }, { name: "ToDo.txt", isDirectory: false, size: 3072 } ], }, { name: "Images", isDirectory: true, category: "Home", items: [ { name: "logo.png", isDirectory: false, size: 20480 }, { name: "banner.gif", isDirectory: false, size: 10240 } ] }, { name: "System", isDirectory: true, category: "Important", items: [ { name: "Employees.txt", isDirectory: false, category: "Important", size: 3072 }, { name: "PasswordList.txt", isDirectory: false, category: "Important", size: 5120 } ] }, { name: "Description.rtf", isDirectory: false, size: 1024 }, { name: "Description.txt", isDirectory: false, size: 2048 } ];