1. Home
  2. Forum
  3. Vue
  4. Add a custom item in the context menu

Add a custom item in the context menu

Hello,

I actually want to be able to add a custom item to the context menu and have it displayed only if there's a file/folder selected.

Thanks,

3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team March 3, 2021 01:31 PM UTC

Hi Omar,  
 
Greeting from Syncfusion support. 
 
We have checked your requirement with FileManager component. You can add the custom item to the context menu by using contextmenuSettings of FileManager component. 
 
Please, refer the below documentation for your reference. 
 
 
For your reference, we have prepared a sample.  
 
 
Please, refer to the below links for FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


OM Omar March 4, 2021 01:20 PM UTC

Hi Sowmiya,

Thanks a lot for your reply, but I also want to be able to change the icon and trigger a certain function upon clicking on the custom item.

Thanks,

SP Sowmiya Padmanaban Syncfusion Team March 5, 2021 09:54 AM UTC

Hi Omar, 
 
You can change the icon using menuOpen event of FileManager component. Please, refer the below code snippet. 
 
   menuopen: function (args) { 
      for (let i = 0; i < args.items.length; i++) { 
        if (args.items[i].id === this.$refs.file_instance.$el.id + "_cm_open") { 
          args.items[i].iconCss = "e-icons e-fe-tick"; 
        } 
      } 
    }, 
 
 
Please, refer the below links for available icons in EJ2 library.         
 
 
You can perform your custom opeartions by using menuClick event of FileManager component. 
 
  menuClick: function (args) { 
      if (args.item.text === "Custom") { 
        // you can perform your custom  operations here. 
      } 
    }, 
 
Please, refer the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon