All docs
V20.2
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
Box
Map
Vue

items[]

Configures context menu items' settings.

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

The FileManager widget 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.

jQuery
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: "create",
                    text: "Create Directory",
                    beginGroup: true
                }
                //...
            ]
        }            
    });
});  

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.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                {
                    text: "Create new file", 
                    icon: "plus",
                    items: [
                        {
                            text: "Text document",
                            extension: ".txt"
                        },
                        {
                            text: "RTF Document",
                            extension: ".rtf"
                        },
                        {
                            text: "Spreadsheet",
                            extension: ".xls"
                        }
                    ]
                }
                // ...
            ]
        }
        onContextMenuItemClick: onItemClick
        // ...
    });
});
function onItemClick(args) {
    if(args.itemData.extension) {
        // your code
    }
}

DevExtreme FileManager - Custom Context Menu Items

beginGroup

Specifies whether a group separator is displayed over the item.

Type:

Boolean

closeMenuOnClick

Specifies if a menu is closed when a user clicks the item.

Type:

Boolean

Default Value: true

component

An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

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 option accepts one of the following:

items

Configures settings of a context menu item's subitems.

The FileManager widget allows you to add default and create custom context menu subitems.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                "create", // default item
                {
                    text: "Create new file", // custom item with subitems
                    items: [
                        {
                            text: "Plain text document",
                            extension: ".txt",
                            onClick: onItemClick
                        },
                        // ...
                    ]
                },
                // ...
                "move", "copy", "delete", "refresh" // default items
            ]
        }
        // ...
    });
});

name

Specifies the context menu item's name.

Type:

String

Accepted Values: 'create' | 'upload' | 'refresh' | 'download' | 'move' | 'copy' | 'rename' | 'delete'

render

An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

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

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data: undefined

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.
See Also

text

Specifies the text inserted into the item element.

Type:

String

visible

Specifies the context menu item's visibility.

Type:

Boolean

Default Value: undefined