React FileManager - contextMenu.items

Configures context menu items' settings.

Selector: Item
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.

App.vue
  • <template>
  • <DxFileManager ... >
  • <DxContextMenu>
  • <DxItem name="rename"/>
  • <DxItem name="download" text="Download a File" />
  • <DxItem name="refresh" :begin-group="true" />
  • </DxContextMenu>
  • </DxFileManager>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • },
  • data() {
  • return {
  • //...
  • };
  • }
  • };
  • </script>

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.

App.vue
  • <template>
  • <DxFileManager
  • :on-context-menu-item-click="onItemClick" >
  • <DxContextMenu>
  • <DxItem text="Create .txt Document" :options="{ extension: '.txt' }" />
  • <DxItem text="Create .rtf Document" :options="{ extension: '.rtf' }" />
  • <DxItem text="Create .xls Document" :options="{ extension: '.xls' }" />
  • </DxContextMenu>
  • </DxFileManager>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • },
  • methods: {
  • onItemClick(e) {
  • if(e.itemData.options.extension) {
  • // your code
  • }
  • }
  • },
  • data() {
  • return {
  • //...
  • };
  • }
  • };
  • </script>

DevExtreme FileManager - Custom Context Menu Items

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.

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.

Selector: Item

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.
App.vue
  • <template>
  • <DxFileManager >
  • <DxContextMenu>
  • <DxItem name="create" />
  • <DxItem text="Create new file">
  • <DxItem text="Text Document" :options="{ extension: '.txt' }" />
  • </DxItem>
  • </DxContextMenu>
  • </DxFileManager>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • } from 'devextreme-vue/file-manager';
  •  
  • export default {
  • components: {
  • DxFileManager,
  • DxContextMenu,
  • DxItem
  • // ...
  • },
  • data() {
  • return {
  • //...
  • };
  • }
  • };
  • </script>

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