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

[Laurin S]

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?

[Rajapandiyan Settu]

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. 

 

Sample: https://stackblitz.com/edit/react-nmmig9-mblka8?file=index.js  

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S