Add/Hide/Update FileManager context menu options

[Sergi Magret]

Hi,

We were wondering how to modify the list of available options in the context menu for the files of the FileManager component, we have seen that we can add custom options by adding a string into the contextMenuSettings.file like described in the https://www.syncfusion.com/forums/158680/hiding-custom-context-menu-items-at-runtime and https://ej2.syncfusion.com/documentation/file-manager/how-to/adding-custom-item-to-context-menu/ pages, but we need to go deeper and change the displayed text (Localization), update the name shown for the "Open" option to "Open preview" and add a new option "Edit in viewer" (the first will open a preview in the same page, the latter will open a full pdf viewer to edit the file, this latter option will only appear on pdf files).

If we update the option from "Open" to "Open preview" we lose the css icon and the id changes as well as the text, so when we update the text to user locale, we can't be sure of the id to know what button the user has clicked.

We tried using something similar to the other context menus, but it doesn't work:

...

file: [

            {

                id: "Open",

                text: "Open preview",

                iconCss: "e-icons e-fe-open"

            },

            {

                id: "EditViewer",

                text: "Edit in viewer",

                iconCss: "e-icons e-open-link"

            },

            '|',

            'Delete',

        ],

...

Any idea on how we can accomplish all of this?

Thanks!

[Sergi Magret]

Hi, any news on this?

[Indhumathy Loganathan]

Hi Sergi,

Greetings from Syncfusion support.

We have validated your requirement and achieved it within the File Manager component as per your request. In the File Manager, we have the contextMenuSettings property, where you can specify menu items for folders and files separately. Also, by using the menuOpen and menuClick events, you can customize the appearance and functionality of the menu items to meet your requirements. Check out the below code snippets.

contextMenuSettings: {

    folder: [

      'Open Preview',

      '|',

      'Cut',

      ...

    ],

    file: [

      'Open Preview',

      '|',

      'Cut',

      ...

    ],

    visible: true,

  },

  ...

  // Icon added to custom menu item

  menuOpen: menuOpen,

  // event for custom menu item

  menuClick: menuClick,

});

fileObject.appendTo('#filemanager');

// Icon added to custom menu item

function menuOpen(args) {

  var fileObj = ej.base.getComponent(

    document.querySelector('#filemanager'),

    'filemanager'

  );

  for (let i = 0; i < args.items.length; i++) {

    //Add icon for the "Open Preview" context menu item.

    if (args.items[i].id === this.element.id + '_cm_open preview') {

      args.items[i].iconCss = 'e-menu-icon e-icons e-fe-open';

    }

  }

  if (args.fileDetails[0].type == '.pdf') {

    //Include "Edit in Viewer" option in the context menu only for PDF files.

    fileObj.contextmenuModule.contextMenu.insertAfter(

      [{ text: 'Edit in Viewer', iconCss: 'e-menu-icon e-icons e-pdf-icon' }],

      'Open Preview'

    );

  }

}

// event for custom menu item

function menuClick(args) {

  var fileObj = ej.base.getComponent(

    document.querySelector('#filemanager'),

    'filemanager'

  );

  //Open preview within the File Manager.

  if (args.item.text === 'Open Preview') {

    fileObj.openFile(args.fileDetails[0].name);

  }

  //Open PDF Viewer to show the file preview.

  if (args.item.text == 'Edit in Viewer') {

    alert('Open a full PDF Viewer file here.');

  }

}

Sample: https://stackblitz.com/edit/kpm8xj?file=index.js

Check out the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L