items[]
Type:
Default Value: [ 'create', 'upload', 'rename', 'move', 'copy', 'delete', 'refresh', 'download' ]
Accepted Values: 'create' | 'upload' | 'refresh' | 'download' | 'move' | 'copy' | 'rename' | 'delete'
The FileManager UI component allows you to add default and custom context menu items.
Predefined Items
Predefined context menu items include:
- 'create' - Creates a new directory.
- 'upload' - Uploads a file.
- 'refresh' - Refreshes the file manager content.
- 'download' - Downloads a file.
- 'move' - Moves files and directories.
- 'copy' - Copies files and directories.
- 'rename' - Renames files and directories.
- 'delete' - Deletes files and directories.
To add a predefined item to the context menu, add its name and optional settings ('visible', 'beginGroup', 'text', 'icon', 'disabled') to the items array.
jQuery
JavaScript
$(function () { $("#file-manager").dxFileManager({ contextMenu: { items: [ // Specify a predefined item's name only "rename", // Specify a predefined item's name and optional settings { name: "create", text: "Create Directory", beginGroup: true } //... ] } }); });
Custom Items
To add a custom context menu item, specify its text and optional settings (for example, a file extension for a newly created file). Use the contextMenuItemClick event to handle clicks on custom context menu items.
jQuery
JavaScript
$(function () { $("#file-manager").dxFileManager({ contextMenu: { items: [ { text: "Create new file", icon: "plus", items: [ { text: "Text document", extension: ".txt" }, { text: "RTF Document", extension: ".rtf" }, { text: "Spreadsheet", extension: ".xls" } ] } // ... ] } onContextMenuItemClick: onItemClick // ... }); }); function onItemClick(args) { if(args.itemData.extension) { // your code } }
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.