Your search did not match any results.
File Manager

Toolbar and Context Menu

The File Manager widget provides the following UI customization options:

  • The toolbar option specifies the toolbar's visibility and available commands.
  • The contextMenu option 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.

Copy to CodePen
Apply
Reset
$(function() { var fileManager = $("#file-manager").dxFileManager({ name: "fileManager", fileProvider: fileSystem, height: 450, permissions: { create: true, copy: true, move: true, remove: true, rename: true }, customizeThumbnail: customizeIcon, toolbar: { items: [ { name: "showNavPane", visible: true }, "separator", "create", { widget: "dxMenu", location: "before", options: { items: [ { text: "Create new file", items: [ { text: "Plain text document", extension: ".txt", onClick: onItemClick }, { text: "Word document", extension: ".doc", onClick: onItemClick }, { text: "Excel spreadsheet", extension: ".xls", onClick: onItemClick } ] } ] } }, "refresh", { name: "separator", location: "after" }, "viewSwitcher" ], fileSelectionItems: [ "move", "copy", "rename", { widget: "dxButton", options: { text: "Share", icon: "share" }, location: "before", onClick: shareItem }, { options: { text: "Unshare", icon: "revert" }, location: "before", onClick: unshareItem }, "separator", "delete", "refresh", "clear" ] }, contextMenu: { items: [ "create", { text: "Create new file", items: [ { text: "Plain text document", extension: ".txt", onClick: onItemClick }, { text: "Word document", extension: ".doc", onClick: onItemClick }, { text: "Excel spreadsheet", extension: ".xls", onClick: onItemClick } ] }, { text: "Share", icon: "share", beginGroup: true, onClick: shareItem }, { text: "Unshare", icon: "revert", onClick: unshareItem }, { name: "rename", beginGroup: true }, "move", "copy", "delete", "refresh" ] } }).dxFileManager("instance"); function customizeIcon(fileManagerItem) { if(fileManagerItem.dataItem && fileManagerItem.dataItem.shared) { return fileManagerItem.isDirectory ? "group" : "card"; } } function onItemClick(args) { var currentDirectory = fileManager.getCurrentDirectory(); var selectedItems = fileManager.getSelectedItems(); var newItem = { __KEY__: Date.now(), name: "New file" + args.itemData.extension, isDirectory: false, size: 0 }; if(selectedItems.length === 1 && selectedItems[0].isDirectory && selectedItems[0].name !== "..") { currentDirectory = selectedItems[0]; } if(currentDirectory.dataItem) { currentDirectory.dataItem.items.push(newItem); } else { fileSystem.push(newItem); } fileManager.refresh(); } function shareItem() { changeSharedState(true); } function unshareItem() { changeSharedState(false); } function changeSharedState(isShared) { fileManager.getSelectedItems().forEach(function(item) { item.dataItem.shared = isShared; }); fileManager.refresh(); } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="file-manager"></div> </div> </body> </html>
var fileSystem = [ { name: "Documents", isDirectory: true, items: [ { name: "Projects", isDirectory: true, items: [ { name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, 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, items: [ { name: "logo.png", isDirectory: false, size: 20480 }, { name: "banner.gif", isDirectory: false, size: 10240 } ] }, { name: "System", isDirectory: true, items: [ { name: "Employees.txt", isDirectory: false, size: 3072 }, { name: "PasswordList.txt", isDirectory: false, size: 5120 } ] }, { name: "Description.rtf", isDirectory: false, size: 1024 }, { name: "Description.txt", isDirectory: false, size: 2048 } ];