JavaScript/jQuery FileManager - contextMenu

Configures the context menu settings.

Type: dxFileManagerContextMenu

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