Toolbar and Context Menu
The File Manager widget provides the following UI customization options:
- The toolbar option specifies the toolbar's visibility and available commands.
- The contextMenu option specifies the context menu's availability and its commands.
The toolbar and context menu support context-invariant and context-sensitive items that can be visible or hidden depending on user action.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@(Html.DevExtreme().FileManager()
.ID("file_manager")
.FileProvider(new JS("fileSystem"))
.Permissions(permissions => permissions
.Create(true)
.Copy(true)
.Move(true)
.Remove(true)
.Rename(true))
.Height(450)
.CustomizeThumbnail("customizeIcon")
.Toolbar(toolbar => {
toolbar.Items(items => {
items.Add()
.Name(FileManagerToolbarItem.ShowNavPane)
.Visible(true);
items.Add().Name(FileManagerToolbarItem.Separator);
items.Add().Name(FileManagerToolbarItem.Create);
items.Add()
.Widget(widget => widget.Menu()
.Items(menuItems => {
menuItems.Add()
.Text("Create new file")
.Items(subItems => {
subItems.Add()
.Text("Plain text document")
.Option("extension", ".txt")
.Option("onClick", new JS("onItemClick"));
subItems.Add()
.Text("Word document")
.Option("extension", ".doc")
.Option("onClick", new JS("onItemClick"));
subItems.Add()
.Text("Excel spreadsheet")
.Option("extension", ".xls")
.Option("onClick", new JS("onItemClick"));
});
})
)
.Location(ToolbarItemLocation.Before);
items.Add().Name(FileManagerToolbarItem.Refresh);
items.Add()
.Name(FileManagerToolbarItem.Separator)
.Location(ToolbarItemLocation.After);
items.Add().Name(FileManagerToolbarItem.ViewSwitcher);
});
toolbar.FileSelectionItems(items => {
items.Add().Name(FileManagerToolbarItem.Move);
items.Add().Name(FileManagerToolbarItem.Copy);
items.Add().Name(FileManagerToolbarItem.Rename);
items.Add().Widget(widget => widget.Button()
.Text("Share")
.Icon("share")
.OnClick("shareItem"))
.Location(ToolbarItemLocation.Before);
items.Add().Widget(widget => widget.Button()
.Text("Unshare")
.Icon("revert")
.OnClick("unshareItem"))
.Location(ToolbarItemLocation.Before);
items.Add().Name(FileManagerToolbarItem.Separator);
items.Add().Name(FileManagerToolbarItem.Delete);
items.Add().Name(FileManagerToolbarItem.Refresh);
items.Add().Name(FileManagerToolbarItem.Clear);
});
})
.ContextMenu(contextMenu => {
contextMenu.Items(items => {
items.Add().Name(FileManagerContextMenuItem.Create);
items.Add()
.Text("Create new file")
.Items(subItems => {
subItems.Add()
.Text("Plain text document")
.Option("extension", ".txt")
.Option("onClick", new JS("onItemClick"));
subItems.Add()
.Text("Word document")
.Option("extension", ".doc")
.Option("onClick", new JS("onItemClick"));
subItems.Add()
.Text("Excel spreadsheet")
.Option("extension", ".xls")
.Option("onClick", new JS("onItemClick"));
});
items.Add()
.Text("Share")
.Icon("share")
.BeginGroup(true)
.Option("onClick", new JS("shareItem"));
items.Add()
.Text("Unshare")
.Icon("revert")
.Option("onClick", new JS("unshareItem"));
items.Add()
.Name(FileManagerContextMenuItem.Rename)
.BeginGroup(true);
items.Add().Name(FileManagerContextMenuItem.Move);
items.Add().Name(FileManagerContextMenuItem.Copy);
items.Add().Name(FileManagerContextMenuItem.Delete);
items.Add().Name(FileManagerContextMenuItem.Refresh);
});
})
)
<script type="text/javascript">
function customizeIcon(fileManagerItem) {
if(fileManagerItem.dataItem && fileManagerItem.dataItem.shared) {
return fileManagerItem.isDirectory ? "group" : "card";
}
}
function onItemClick(args) {
var fileManager = getFileManager();
var currentDirectory = fileManager.getCurrentDirectory();
var selectedItems = fileManager.getSelectedItems();
var newItem = {
__KEY__: Date.now(),
name: "New file" + args.itemData.extension,
isDirectory: false,
size: 0
};
if(selectedItems.length === 1 && selectedItems[0].isDirectory && selectedItems[0].name !== "..") {
currentDirectory = selectedItems[0];
}
if(currentDirectory.dataItem) {
currentDirectory.dataItem.items.push(newItem);
} else {
fileSystem.push(newItem);
}
fileManager.refresh();
}
function shareItem() {
changeSharedState(true);
}
function unshareItem() {
changeSharedState(false);
}
function changeSharedState(isShared) {
var fileManager = getFileManager();
fileManager.getSelectedItems().forEach(function(item) {
item.dataItem.shared = isShared;
});
fileManager.refresh();
}
function getFileManager() {
return $("#file_manager").dxFileManager("instance");
}
</script>
<script src="~/Scripts/data/fileSystem.js"></script>
using DevExtreme.MVC.Demos.Models.FileManagement;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FileManagerController : Controller {
public ActionResult UICustomization() {
return View();
}
}
}
var fileSystem = [
{
name: "Documents",
isDirectory: true,
items: [
{
name: "Projects",
isDirectory: true,
items: [
{
name: "About.rtf",
isDirectory: false,
size: 1024
},
{
name: "Passwords.rtf",
isDirectory: false,
size: 2048
}
]
},
{
name: "About.xml",
isDirectory: false,
size: 1024
},
{
name: "Managers.rtf",
isDirectory: false,
size: 2048
},
{
name: "ToDo.txt",
isDirectory: false,
size: 3072
}
],
},
{
name: "Images",
isDirectory: true,
items: [
{
name: "logo.png",
isDirectory: false,
size: 20480
},
{
name: "banner.gif",
isDirectory: false,
size: 10240
}
]
},
{
name: "System",
isDirectory: true,
items: [
{
name: "Employees.txt",
isDirectory: false,
size: 3072
},
{
name: "PasswordList.txt",
isDirectory: false,
size: 5120
}
]
},
{
name: "Description.rtf",
isDirectory: false,
size: 1024
},
{
name: "Description.txt",
isDirectory: false,
size: 2048
}
];