Hiding Custom Context Menu Items at Runtime

[Randy Craven]

Hello,

In File Manager we are creating custom items for our toolbar and context menus.

We need to hide certain items at runtime; for example, if the selected file is a video file we will show a toolbar/context menu item that is not shown for other file types or for folders.

Our approach has been to create these custom items in the File Manager configuration:

            toolbarSettings: {

                items: ['NewFolder', 'Upload', 'SortBy', 'Refresh', 'Delete', 'Custom', ]

            },

            contextMenuSettings: {

                file: ["Custom",  "|", "Open", "|", "Delete", "Rename", "|", "Details"],

                folder: ["Open", "|", "Delete",  "Rename"],

                layout: ["SortBy", "|", "NewFolder", "Upload"],

                visible: true

            },

Then, at runtime our approach is to hide them where appropriate:

            var customContextMenuOption = document.querySelector('#fileManager_cm_custom');

            customContextMenuOption.style.display = 'none';

            document.querySelector('#fileManager_tb_custom').style.visibility= 'hidden';

This approach works for toolbar items, they are hidden or visible as expected.  It does not appear to work for context menu items, the custom item is always visible.

Can you suggest what I might be doing incorrectly here?

Thank You,

Randy Craven

[Sowmiya Padmanaban]

Hi Randy Craven,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. You can achieve your requirement by using menuOpen event of FileManager component. 

 

Refer the below code snippet. 

 

let fileObject: FileManager = new FileManager({ 

  ajaxSettings: { 

    url: hostUrl + "api/FileManager/FileOperations", 

    getImageUrl: hostUrl + "api/FileManager/GetImage", 

    uploadUrl: hostUrl + "api/FileManager/Upload", 

    downloadUrl: hostUrl + "api/FileManager/Download" 

  }, 

  view: "Details", 

  contextMenuSettings: { 

    file: ["Custom", "|", "Open", "|", "Delete", "Rename", "|", "Details"], 

    folder: ["Custom", "Open", "|", "Delete", "Rename"], 

    layout: ["Custom", "SortBy", "|", "NewFolder", "Upload"], 

    visible: true 

  }, 

  menuOpen: menuOpen 

}); 

fileObject.appendTo("#filemanager"); 

 

function menuOpen(args) { 

  if (!(args.fileDetails[0].type == ".mp4")) { 

    args.items.splice(0, 1); 

  } 

} 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/ugstc6?file=index.ts 

 

Refer the below links to know more about the FileManager component. 

 

UG Documentation- https://ej2.syncfusion.com/documentation/file-manager/getting-started/  

 

Demo link- https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html  

 

API reference- https://ej2.syncfusion.com/documentation/api/file-manager/#menuopen 

 

Please let us know , if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Randy Craven]

Hello,

Thank you for this information.  I was able to add and remove video specific options to the context menu with this technique.

Randy Craven

[Sowmiya Padmanaban]

Hi Randy Craven,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P