JavaScript/jQuery FileManager - contextMenu.items

Configures context menu items' settings.

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.

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: "download",
  • text: "Download a File"
  • },
  • {
  • name: "refresh",
  • beginGroup: true
  • }
  • ]
  • }
  • });
  • });

DevExtreme FileManager - Predefined Context Menu Items

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.

JavaScript
  • $(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
  • }
  • }

DevExtreme FileManager - Custom Context Menu Items

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item.

Type:

Boolean

Default Value: true

disabled

Specifies whether the menu item responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the menu item's icon.

Type:

String

This property accepts one of the following:

items

Configures settings of a context menu item's subitems.

The FileManager UI component allows you to add default and create custom context menu subitems.

NOTE
You can specify the items option for custom context menu items only.
JavaScript
  • $(function () {
  • $("#file-manager").dxFileManager({
  • contextMenu: {
  • items: [
  • "create", // default item
  • {
  • text: "Create new file", // custom item with subitems
  • items: [
  • {
  • text: "Text Document",
  • extension: ".txt",
  • },
  • // ...
  • ]
  • },
  • // ...
  • ]
  • }
  • // ...
  • });
  • });

name

Specifies the context menu item's name.

Type:

String

Accepted Values: 'create' | 'upload' | 'refresh' | 'download' | 'move' | 'copy' | 'rename' | 'delete'

selectable

Specifies whether or not a user can select a menu item.

Type:

Boolean

Default Value: false

selected

Specifies whether or not the item is selected.

Type:

Boolean

Default Value: false

text

Specifies the text inserted into the item element.

Type:

String

visible

Specifies the context menu item's visibility.

Type:

Boolean

Default Value: undefined