Toolbar and Context Menu
The FileManager component 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(() => {
const 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,
},
},
'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,
},
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) {
let 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 = fileManager.getCurrentDirectory()) {
const newItem = {
__KEY__: Date.now(),
name: `New file${fileExtension}`,
isDirectory: false,
size: 0,
};
if (!directory.isDirectory) {
return false;
}
let array = null;
if (!directory.dataItem) {
array = fileSystem;
} else {
array = directory.dataItem.items;
if (!array) {
array = [];
directory.dataItem.items = array;
}
}
array.push(newItem);
return true;
}
function updateCategory(newCategory, directory, viewArea) {
let items = null;
if (viewArea === 'navPane') {
items = [directory];
} else {
items = fileManager.getSelectedItems();
}
items.forEach((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/22.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.1.5/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>
const 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,
},
];