How can I enable or disable a menu option that is inside a template in ASP.NET MVC Grid?

[Juan Cruz]

Hello, I am configuring a grid with menus within templates for each record and I would like to enable or disable options depending on the values in each record. I am using the answer they gave to another user to create the menu inside a template (Thread ID:149122 / https://www.syncfusion.com/forums/149327/how-i-add-a-menu-in-the-grid-toolbar ), but when using menuObj.enableItems (), the grid does not show records, although it does. I hope you can help me. First of all, Thanks

[Ajith Govarthan]

Hi Juan, 

Greetings from Syncfusion. 

Based on your requirement we have prepared sample in that we have rendered EJ2 Menu component as column template. In the menu Component we have used beforeOpen event in that we have disabled the options of the Menu component based on the rowData of the corresponding row using the enableItems method. We have attached the sample so please refer the sample for your reference. 

Code Snippet:  

Index.cshtml 

<script type="text/javascript"> 

function template(args) { 

if (args.column.headerText === "Inupt1") { 

var ele = args.cell.querySelector('.list'); 

var menuItems = [ 

{ 

text: 'Events', 

items: [ 

{ text: 'Conferences' }, 

{ text: 'Music' }, 

{ text: 'Workshops' } 

] 

}, 

]; 

var menuComp = new ej.navigations.Menu({ 

items: menuItems, beforeOpen: function (args) { 

//Handling sub menu items 

var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

var row = new ej.grids.parentsUntil(args.event.target, 'e-row', false); 

var rowDetails = grid.getRowInfo(new ej.grids.parentsUntil(args.event.target, 'e-row', false)); 

if (row && rowDetails.rowData.OrderID > 10001 && rowDetails.rowData.OrderID < 10005) { 

for (var i = 0; i < args.items.length; i++) { 

if (disableItems.indexOf(args.items[i].text) > -1) { 

menuComp.enableItems([args.items[i].text], false, false); 

} 

} 

} 

}}); 

menuComp.appendTo(ele); 

var disableItems = ['Music', 'Workshops']; 

} 

} 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/menu_component_mvc-2068270670.zip  

Documentation Link: https://ej2.syncfusion.com/javascript/documentation/menu/how-to/customize-menu-items/#enable-or-disable-menu-items 

Regards, 

Ajith G