items[]
The FileManager widget allows you to add default and custom context menu items.
Predefined Items
Predefined context menu items include:
- 'create' - Creates a new directory.
- 'upload' - Uploads a file.
- 'refresh' - Refreshes the file manager content.
- 'download' - Downloads a file.
- 'move' - Moves files and directories.
- 'copy' - Copies files and directories.
- 'rename' - Renames files and directories.
- 'delete' - Deletes files and directories.
To add a predefined item to the context menu, add its name and optional settings ('visible', 'beginGroup', 'text', 'icon', 'disabled') to the items array.
jQuery
$(function () {
$("#file-manager").dxFileManager({
contextMenu: {
items: [
// Specify a predefined item's name only
"rename",
// Specify a predefined item's name and optional settings
{
name: "create",
text: "Create Directory",
beginGroup: true
}
//...
]
}
});
}); 
Custom Items
To add a custom context menu item, specify its text and optional settings (for example, a file extension for a newly created file). Use the contextMenuItemClick event to handle clicks on custom context menu items.
jQuery
$(function () {
$("#file-manager").dxFileManager({
contextMenu: {
items: [
{
text: "Create new file",
icon: "plus",
items: [
{
text: "Text document",
extension: ".txt"
},
{
text: "RTF Document",
extension: ".rtf"
},
{
text: "Spreadsheet",
extension: ".xls"
}
]
}
// ...
]
}
onContextMenuItemClick: onItemClick
// ...
});
});
function onItemClick(args) {
if(args.itemData.extension) {
// your code
}
}
component
An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
icon
This option accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
items
The FileManager widget allows you to add default and create custom context menu subitems.
jQuery
$(function () {
$("#file-manager").dxFileManager({
contextMenu: {
items: [
"create", // default item
{
text: "Create new file", // custom item with subitems
items: [
{
text: "Plain text document",
extension: ".txt",
onClick: onItemClick
},
// ...
]
},
// ...
"move", "copy", "delete", "refresh" // default items
]
}
// ...
});
});name
render
An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
The following types of the specified value are available.
- Assign a string containing the name of the required template.
- Assign a jQuery object of the template's container.
- Assign a DOM Node of the template's container.
- Assign a function that returns the jQuery object or a DOM Node of the template's container.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.