JavaScript/jQuery FileManager - contextMenu.items
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.
- $(function () {
- $("#file-manager").dxFileManager({
- contextMenu: {
- items: [
- // Specify a predefined item's name only
- "rename",
- // Specify a predefined item's name and optional settings
- {
- name: "download",
- text: "Download a File"
- },
- {
- name: "refresh",
- 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.
- $(function () {
- $("#file-manager").dxFileManager({
- contextMenu: {
- items: [
- {
- text: "Create .txt Document",
- extension: ".txt"
- },
- {
- text: "Create .rtf Document",
- extension: ".rtf"
- },
- {
- text: "Create .xls Document",
- extension: ".xls"
- }
- ]
- }
- onContextMenuItemClick: onItemClick
- // ...
- });
- });
- function onItemClick(args) {
- if(args.itemData.extension) {
- // your code
- }
- }
icon
This property accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
items
The FileManager UI component allows you to add default and create custom context menu subitems.
- $(function () {
- $("#file-manager").dxFileManager({
- contextMenu: {
- items: [
- "create", // default item
- {
- text: "Create new file", // custom item with subitems
- items: [
- {
- text: "Text Document",
- extension: ".txt",
- },
- // ...
- ]
- },
- // ...
- ]
- }
- // ...
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.