JavaScript/jQuery FileManager - contextMenu.items

Configures context menu items' settings.

Default Value: [ 'create', 'upload', 'rename', 'move', 'copy', 'delete', 'refresh', 'download' ]

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.

DevExtreme FileManager - Predefined Context Menu Items

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
  • }
  • ]
  • }
  • });
  • });

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.

DevExtreme FileManager - 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
  • }
  • }

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

You can add group separators only between items in submenus.

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item. Does not apply to the root items.

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.

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

If you use both this property and a template, the template overrides the text.

visible

Specifies the context menu item's visibility.

Type:

Boolean

| undefined
Default Value: undefined