Toolbar and Context Menu
The FileManager 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")
.FileSystemProvider(new JS("fileSystem"))
.Permissions(permissions => permissions
.Create(true)
.Delete(true)
.Rename(true)
.Download(true))
.Height(450)
.ItemView(itemView => {
itemView.Details(details => {
details.Columns(columns => {
columns.Add().DataField("thumbnail");
columns.Add().DataField("name");
columns.Add().DataField("category").Caption("Category").Width(95);
columns.Add().DataField("dateModified");
columns.Add().DataField("size");
});
})
.ShowParentFolder(false);
})
.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")
.Icon("plus")
.Items(subItems => {
subItems.Add()
.Text("Text Document")
.Option("extension", ".txt");
subItems.Add()
.Text("RTF Document")
.Option("extension", ".rtf");
subItems.Add()
.Text("Spreadsheet")
.Option("extension", ".xls");
});
})
.OnItemClick("onItemClick"))
.Location(ToolbarItemLocation.Before);
items.Add().Name(FileManagerToolbarItem.Refresh);
items.Add().Name(FileManagerToolbarItem.Separator).Location(ToolbarItemLocation.After);
items.Add().Name(FileManagerToolbarItem.SwitchView);
});
toolbar.FileSelectionItems(items => {
items.Add().Name(FileManagerToolbarItem.Rename);
items.Add().Name(FileManagerToolbarItem.Separator);
items.Add().Name(FileManagerToolbarItem.Delete);
items.Add().Name(FileManagerToolbarItem.Separator);
items.Add()
.Widget(widget => widget.Menu()
.Items(menuItems => {
menuItems.Add()
.Text("Category")
.Icon("tags")
.Items(subItems => {
subItems.Add()
.Text("Work")
.Option("category", "Work");
subItems.Add()
.Text("Important")
.Option("category", "Important");
subItems.Add()
.Text("Home")
.Option("category", "Home");
subItems.Add()
.Text("None")
.Option("category", "None");
});
})
.OnItemClick("onItemClick"))
.Location(ToolbarItemLocation.Before);
items.Add().Name(FileManagerToolbarItem.Refresh);
items.Add().Name(FileManagerToolbarItem.ClearSelection);
});
})
.OnContextMenuItemClick("onItemClick")
.ContextMenu(contextMenu => {
contextMenu.Items(items => {
items.Add().Name(FileManagerContextMenuItem.Create);
items.Add()
.Text("Create new file")
.Icon("plus")
.Items(subItems => {
subItems.Add()
.Text("Text Document")
.Option("extension", ".txt");
subItems.Add()
.Text("RTF Document")
.Option("extension", ".rtf");
subItems.Add()
.Text("Spreadsheet")
.Option("extension", ".xls");
});
items.Add()
.Name(FileManagerContextMenuItem.Rename)
.BeginGroup(true);
items.Add().Name(FileManagerContextMenuItem.Delete);
items.Add()
.Text("Category")
.Icon("tags")
.Items(subItems => {
subItems.Add()
.Text("Work")
.Option("category", "Work");
subItems.Add()
.Text("Important")
.Option("category", "Important");
subItems.Add()
.Text("Home")
.Option("category", "Home");
subItems.Add()
.Text("None")
.Option("category", "");
})
.BeginGroup(true);
items.Add().Name(FileManagerContextMenuItem.Refresh);
});
})
)
<script type="text/javascript">
function onItemClick(args) {
var fileManager = getFileManager();
var updated = false;
if(args.itemData.extension) {
updated = createFile(args.itemData.extension);
} else if(args.itemData.category !== undefined) {
updated = updateCategory(args.itemData.category);
}
if(updated) {
fileManager.refresh();
}
}
function createFile(fileExtension) {
var fileManager = getFileManager();
var currentDirectory = fileManager.getCurrentDirectory();
var newItem = {
__KEY__: Date.now(),
name: "New file" + fileExtension,
isDirectory: false,
size: 0
};
if(currentDirectory.dataItem) {
currentDirectory.dataItem.items.push(newItem);
} else {
fileSystem.push(newItem);
}
return true;
}
function updateCategory(newCategory) {
var fileManager = getFileManager();
var selectedItems = fileManager.getSelectedItems();
selectedItems.forEach(function(selectedItem) {
selectedItem.dataItem.category = newCategory;
});
return selectedItems.length > 0;
}
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,
category: "Work",
items: [
{
name: "Projects",
isDirectory: true,
category: "Work",
items: [
{
name: "About.rtf",
isDirectory: false,
size: 1024
},
{
name: "Passwords.rtf",
isDirectory: false,
category: "Important",
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,
category: "Home",
items: [
{
name: "logo.png",
isDirectory: false,
size: 20480
},
{
name: "banner.gif",
isDirectory: false,
size: 10240
}
]
},
{
name: "System",
isDirectory: true,
category: "Important",
items: [
{
name: "Employees.txt",
isDirectory: false,
category: "Important",
size: 3072
},
{
name: "PasswordList.txt",
isDirectory: false,
category: "Important",
size: 5120
}
]
},
{
name: "Description.rtf",
isDirectory: false,
size: 1024
},
{
name: "Description.txt",
isDirectory: false,
size: 2048
}
];