Dynamic Context Menu Items in Grid

[Nicholas]

is it possible to add options to the context menu of a grid based on the data of the grid row?

For example, I have a grid of users some of which have a field called enabled as true and some of which have it as false. I want the users with the enabled field marked as true to have a context menu button that says disable and the users that have enabled as false to have a button that says enable. How would this be done?

[Ajith Govarthan]

Hi Nicholas, 

 

Greetings from Syncfusion support. 

 

Yes, you can disable the context-menu items dynamically by using ‘enableItems’ method of contextmenu. Please find the code example for your reference. 

 

@{  

    List<object> ContextMenuitems = new List<object>(); 

    ContextMenuitems.Add(new { text = "Copy with headers", target= ".e-content", id = "copywithheader" }); 

ContextMenuitems.Add(new { text = "Edit Record", target= ".e-content", id = "edit" }); 

ContextMenuitems.Add(new { text = "Delete Record", target= ".e-content", id = "delete" }); 

} 

 

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" contextMenuItems="ContextMenuitems" contextMenuOpen="contextMenuClick" >      

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"  textAlign="Left"  width="125"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="125" textAlign="Right" ></e-grid-column> 

        <e-grid-column field="ShipName" headerText="Ship Name"  width="120"></e-grid-column>                  

        <e-grid-column field="ShipCity"  headerText="Ship City"   width="170"></e-grid-column> 

        <e-grid-column field="CustomerID"  headerText="Customer ID" textAlign="Right"  width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

function contextMenuOpen(args) { 

    if (args.rowInfo.rowData["OrderID"] %2 == 0) { 

        args.element.ej2_instances[0].enableItems(['openContact','Edit Record', 'Delete Record'], false) // you can disable context menu item by using ‘enableItems’ method of contextMenu. You need to pass contextMenu items and set as false. 

    } 

} 

</script> 

 

Here, we have disabled the contextmenu items when OrderID column value %0 == 0. 

 

 

Please get back to us if you have any queries. 

 

Regards, 

Ajith G 

[Nicholas]

Is there a way to completely hide/remove the item instead of just disabling it?

[Joseph Christ Nithin Issack]

Hi Nicholas, 

  

  Thanks for your update. 

  

  Based on your requirement you want to hide a menu item based on the current rowData. Your requirement can be achieved using the `contextMenuOpen` event of the EJ2 Grid. Where you can manage showing and hiding the context menu items dynamically based on some conditions. 

  

Kindly refer the below code example. 

  

contextMenuOpen(args): void { 

  

        if(args.rowInfo.rowData.OrderID === 10248) { 

        args.element.ej2_instances[0].hideItems(['Copy']); 

    } else { 

        args.element.ej2_instances[0].showItems(['Copy']); 

    } 

  } 

 

  

Please get back to us for further details. 

  

Regards, 

Joseph I