Vue FileManager - toolbar

Configures toolbar settings.

Type: dxFileManagerToolbar

View Demo

DevExtreme File Manager - Toolbar

fileSelectionItems[]

Configures settings of the toolbar items that are visible when users select files.

Type:

Array<dxFileManagerToolbarItem | String>

Default Value: [ 'download', 'separator', 'move', 'copy', 'rename', 'separator', 'delete', 'clearSelection', { name: 'separator', location: 'after' }, 'refresh' ]
Accepted Values: 'showNavPane' | 'create' | 'upload' | 'refresh' | 'switchView' | 'download' | 'move' | 'copy' | 'rename' | 'delete' | 'clearSelection' | 'separator'

DevExtreme File Manager - Toolbar - File Selection Items

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        toolbar: {
            fileSelectionItems: [
                "move", "copy", "rename",
                {
                    widget: "dxButton",
                    options: {
                        text: "Share",
                        icon: "arrowright"
                    },
                    location: "before",
                    onClick: shareItem
                },
                // ...
                "separator", "delete", "refresh", "clear"
            ]                
        }
    });
});

items[]

Configures toolbar items' settings.

Type:

Array<dxFileManagerToolbarItem | String>

Default Value: [ 'showNavPane', 'create', 'upload', 'switchView', { name: 'separator', location: 'after' }, 'refresh' ]
Accepted Values: 'showNavPane' | 'create' | 'upload' | 'refresh' | 'switchView' | 'download' | 'move' | 'copy' | 'rename' | 'delete' | 'clearSelection' | 'separator'

The FileManager UI component allows you to add default and create custom toolbar items.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({
        toolbar: {
            items: [
                {
                    name: "showNavPane",
                    visible: true
                },
                "separator", "create",
                {
                    widget: "dxMenu",
                    location: "before",
                    options: {
                        items: [
                            {
                                text: "Create new file",
                                items: [
                                    {
                                        text: "Plain text document",
                                        extension: ".txt",
                                        onClick: onItemClick
                                    },]
                            }
                        ]
                    }
                }]
        }
    });
});