React FileManager - contextMenu
Selector: ContextMenu
Type:
dxFileManagerContextMenu
items[]
Selector: Item
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.
App.js
- import React from 'react';
- import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';
- const App = () => {
- return (
- <FileManager...>
- <ContextMenu>
- <Item name="rename" />
- <Item name="download" text="Download a File" />
- <Item name="refresh" beginGroup="true" />
- </ContextMenu>
- </FileManager>
- );
- };
- export default App;
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.js
- import React from 'react';
- import FileManager, { ContextMenu, Item } from 'devextreme-react/file-manager';
- const App = () => {
- const onItemClick = (e) => {
- if(e.itemData.extension) {
- // your code
- }
- };
- return (
- <FileManager onContextMenuItemClick={onItemClick}>
- <ContextMenu>
- <Item text="Create .txt Document" extension=".txt" />
- <Item text="Create .rtf Document" extension=".rtf" />
- <Item text="Create .xls Document" extension=".xls" />
- </ContextMenu>
- </FileManager>
- );
- };
- export default App;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.