toolbar
The FileManager UI component allows you to add default and custom toolbar items.
Predefined Items
Predefined toolbar items include:
- 'showNavPane' - Shows or hides the navigation panel.
- 'create' - Creates a new directory.
- 'upload' - Uploads a file.
- 'refresh' - Refreshes the file manager content and shows the progress panel.
- 'download' - Downloads a file.
- 'move' - Moves files and directories.
- 'copy' - Copies files and directories.
- 'rename' - Renames files and directories.
- 'delete' - Deletes files and directories.
- 'switchView' - Switches between the 'Details' and 'Thumbnails' file system representation modes.
- 'clearSelection' - Clears selection from files and directories in the Item View area.
To add a predefined item to the toolbar, specify its name and optional settings ('visible', 'location', 'locateInMenu', 'text', 'icon', 'disabled') and add the item to one of the following collections:
items - Displays toolbar items when no file system item is selected.
fileSelectionItems - Displays toolbar items when one or more file system items are selected.
jQuery
$(function () { $("#file-manager").dxFileManager({ toolbar: { items: [ // Specify a predefined item's name and optional settings { name: "create", text: "Create a directory", icon: "newfolder" }, // Specify a predefined item's name only "switchView", "separator" //... ] fileSelectionItems: [ "copy", "rename" //... ] } }); });
Custom Items
To add a custom toolbar item, specify its text and optional settings (for example, a file extension for the toolbar item that creates a new file) and add the item to one of the following collections:
items - Displays toolbar items when no file system item is selected.
fileSelectionItems - Displays toolbar items when one or more file system items are selected.
The widget property allows you to specify a UI component for a custom toolbar item (dxButton is the default UI component). Use the toolbarItemClick event to handle clicks on custom toolbar items.
jQuery
$(function () { $("#file-manager").dxFileManager({ toolbar: { items: [ // Specify a custom item as a dxMenu UI component { widget: "dxMenu", location: "before", options: { items: [ { text: "Create new file", icon: "plus", items: [ { text: "Text Document", extension: ".txt" }, { text: "RTF Document", extension: ".rtf" }, { text: "Spreadsheet", extension: ".xls" }] } ], } }] fileSelectionItems: [ // Specify a custom item as a default dxButton UI component { options:{ text: "Move to Temp", icon: "movetofolder", temp: true } } //... ] } onToolbarItemClick: onItemClick }); }); function onItemClick(args) { if(args.itemData.extension) { // your code } else if(args.itemData.temp){ // your code } }
fileSelectionItems[]
jQuery
$(function () { $("#file-manager").dxFileManager({ toolbar: { fileSelectionItems: [ "move", "copy", "rename", { widget: "dxButton", options: { text: "Share", icon: "arrowright" }, location: "before", onClick: shareItem }, // ... "separator", "delete", "refresh", "clear" ] } }); });