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