DevExtreme - File Manager Toolbar And Context Menu Customization (v19.2)

DevExtreme Team Blog
04 December 2019

The DevExtreme File Manager widget now supports customization of the built-in toolbar and context menu. You can populate the item collections with standard and user-defined command items, and configure settings to change their appearance and behavior.

Standard Items

Standard toolbar and context menu items support basic file and folder operations such as copy, delete and rename, download and others. These command items are available out of the box and do not require additional code. The documentation pages for the options toolbar.items.name and contextMenu.items.name include full lists of the available standard command names.

You can change visual settings for standard items, including text, icon and cssClass.

toolbar: {
  items: [
    {
      name : "create"  ,
      icon : "plus",
      text : "Add"
    },
    ...

Custom Button Text and Icon

Custom Items

Custom items allow you to bind your own functionality to the UI elements in context menus and toolbars. For context menu items, you can use the onClick event to attach your own handler:

contextMenu: {
  items: [
    {
      text: "Share",
      onClick: customOnClickHandler
    },
    ...

Toolbar items also support a selection of widgets (see the widget option). If you specify a widget, you should use the options setting to pass parameters to the widget itself, including event handlers.

toolbar: {
  items: [
    {
      widget: "dxButton",
      options: {
        text: "Share",
        onClick: customOnClickHandler
      }
    },
    ...

Toolbar Item Visibility

The File Manager has a built-in system to distinguish general use toolbar items from those that apply only to selected files. The items collection includes those command items that should be visible at all times, while items in the fileSelectionItems collection are only displayed if the user has selected one or more files or folders.

Toolbar Items Visible For Selected Files

The visibility of standard items is additionally controlled by internal logic. For instance, the rename item appears only when files are selected, even if you include it in the items collection. If you would like the item to be visible at all times, you can set the visible property explicitly.

items: [
  {
    name : "rename",
    visible : true,
  },
  ...

Hierarchical Context Menu

The File Manager now supports a hierarchical context menu with submenus. Please note that the following sample only shows standard command items for brevity, but custom items can also be included at any point in the hierarchy.

contextMenu: {
  items: [
    {
      text: "Editing",
      items: [
        "delete",
        "rename"
      ]
    }
}

Hierarchical Context Menu

3 comment(s)
Shahab
Shahab

Nice feature!

Another very useful functionality is the ability to upload a whole folder. I mean the folder and its subfolders and files.

The Telerik already has this functionality

https://demos.telerik.com/aspnet-core/upload/directoryupload



4 December, 2019
Appy Developers
Appy Developers
Very nice features.
4 December, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)
Hello,

We plan to support directory upload in the future.
Should you have any other requirements for our File Manager component, feel free to contact us at any time.

 

5 December, 2019

Please login or register to post comments.