React FileManager - toolbar

Configures toolbar settings.

Type: dxFileManagerToolbar

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' ]
Accepted Values: 'showNavPane' | 'create' | 'upload' | 'refresh' | 'switchView' | 'download' | 'move' | 'copy' | 'rename' | 'delete' | 'clearSelection' | 'separator'

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' ]
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.

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
  • },]
  • }
  • ]
  • }
  • }]
  • }
  • });
  • });