Vue FileManager - contextMenu

Configures the context menu settings.

Type: dxFileManagerContextMenu

View Demo

items[]

Configures context menu items' settings.

Type:

Array<dxFileManagerContextMenuItem | String>

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

The FileManager UI component allows you to add default and custom context menu items.

jQuery

JavaScript

$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                "create", // default item
                {
                    name: "create",
                    text: "Create Directory",
                    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.

jQuery

JavaScript

$(function () {
    $("#file-manager").dxFileManager({
        contextMenu: {
            items: [
                {
                    text: "Create new file", 
                    icon: "plus",
                    items: [
                        {
                            text: "Plain text document",
                            extension: ".txt",
                            onClick: onItemClick
                        },
                        // ...
                    ]
                },
                // ...
                "move", "copy", "delete", "refresh" // default items
            ]
        }
        // ...
    });
});

Was this topic helpful?

Thank you!

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!