Box
Map

JavaScript/jQuery FileManager - toolbar

Configures toolbar settings.

Type: dxFileManagerToolbar

View Demo

DevExtreme File Manager - 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.

NOTE
Note that optional settings for predefined toolbar items should be specified at the same level as the item's name property.

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.

fileSelectionItems[]

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

Default Value: [ 'download', 'separator', 'move', 'copy', 'rename', 'separator', 'delete', 'clearSelection', { name: 'separator', location: 'after' }, 'refresh' ]

DevExtreme File Manager - Toolbar - File Selection Items

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.

Default Value: [ 'showNavPane', 'create', 'upload', 'switchView', { name: 'separator', location: 'after' }, 'refresh' ]