Your search did not match any results.
File Manager

Toolbar and Context Menu

The FileManager 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", fileSystemProvider: fileSystem, height: 450, permissions: { create: true, delete: true, rename: true, download: true }, itemView: { details: { columns: [ "thumbnail", "name", { dataField: "category", caption: "Category", width: 95 }, "dateModified", "size" ] }, showParentFolder: false }, toolbar: { items: [ { name: "showNavPane", visible: true }, "separator", "create", { widget: "dxMenu", location: "before", options: { items: [ { text: "Create new file", icon: "plus", items: [ { text: "Text Document", extension: ".txt" }, { text: "RTF Document", extension: ".rtf" }, { text: "Spreadsheet", extension: ".xls" } ] } ], onItemClick: onItemClick } }, "refresh", { name: "separator", location: "after" }, "switchView" ], fileSelectionItems: [ "rename", "separator", "delete", "separator", { widget: "dxMenu", options: { items: [ { text: "Category", icon: "tags", items: [ { text: "Work", category: "Work" }, { text: "Important", category: "Important" }, { text: "Home", category: "Home" }, { text: "None", category: "" } ] } ], onItemClick: onItemClick }, location: "before" }, "refresh", "clearSelection" ] }, onContextMenuItemClick: onItemClick, contextMenu: { items: [ "create", { text: "Create new file", icon: "plus", items: [ { text: "Text Document", extension: ".txt" }, { text: "RTF Document", extension: ".rtf" }, { text: "Spreadsheet", extension: ".xls" } ] }, { name: "rename", beginGroup: true }, "delete", { text: "Category", icon: "tags", items: [ { text: "Work", category: "Work" }, { text: "Important", category: "Important" }, { text: "Home", category: "Home" }, { text: "None", category: "" } ], beginGroup: true }, "refresh" ] } }).dxFileManager("instance"); function onItemClick(args) { var updated = false; if(args.itemData.extension) { updated = createFile(args.itemData.extension, args.fileSystemItem); } else if(args.itemData.category !== undefined) { updated = updateCategory(args.itemData.category, args.fileSystemItem, args.viewArea); } if(updated) { fileManager.refresh(); } } function createFile(fileExtension, directory) { 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 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; } });
<!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.5.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/20.1.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.1.8/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, 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 } ];