We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I dynamically enable/disable a ContextMenu item inside a React Grid?

Hi, I'm trying to enable/disable a particular item of my ContextMenu inside my Grid Component. But, unfortunately, following piece of code is not working completely correct:

<GridComponent
 [...]
 contextMenuOpen={(args=> {
     //the context menu item "openContact" should only be enabled if the current row property "contactId" is not null
    this.grid.contextMenuModule.contextMenu.enableItems(["openContact"], args.rowInfo?.rowData?.contactId !== null);
 }}
 [...]
 >

This piece of code works as long no other context menu, for example the sub-context-menu for Exports, gets hovered by the mouse. Once the sub-context-menu for Exports gets hovered by the mouse, the item is again enabled.
The context menu is looking like this:



Is there any other method to enable/disable context menu items dynamically?

1 Reply 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team November 9, 2020 01:35 AM

Hi Laurin, 
 
Greetings from Syncfusion support. 
 
Query: This piece of code works as long no other context menu, for example the sub-context-menu for Exports, gets hovered by the mouse. Once the sub-context-menu for Exports gets hovered by the mouse, the item is again enabled. 
 
We have analyzed your requirement. You can resolve the reported problem by using below condition in the contextMenuOpen event. 
 
 
contextMenuOpen(args) { 
    if (args.rowInfo.rowData) { 
      this.grid.contextMenuModule.contextMenu.enableItems( ["openContact"], args.rowInfo?.rowData?.OrderID !== null); 
    } 
  } 
 
 
Find the below sample for your reference. 
 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon