Vue 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.
- <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>
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.
- <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>
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.
- <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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.