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

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
5 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
CRM-1670b237-a47e-4b8f-a125-79ee9ea50f33
OBG

Hi there,

really nice component, thank you very much!

i tried to implement custom context menu items, which depend on the selected file(s). the context menu should only appear under certain conditions, which result from specific properties of the selected filesystem item.

my guess would be, to implement the "visible" property as a function, but it only accepts a boolean.

https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxFileManager/Configuration/contextMenu/items/#visible


so is there any other way, to make an context-item really contextual, i.e. dependant on the selected file or folder?


many thx in advance

16 October 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi OBG,

Thanks. There is a solution to show or hide items in a context menu based on the currently selected file. Change the item.visible property in the selectionChanged event handler.

However, the file manager doesn't support this option for folders in the left hand TreeView section yet. We plan to support folders customization in a future release. Please keep watch for our upcoming roadmap later this year.

Should you have any other requirements for our File Manager component, feel free to contact us at any time.
20 October 2020

Please login or register to post comments.