How to disable kendo menu submenu

Question

I want to disable the kendo menu subelement dynamically. I defined a kendo menu like

Html: <div id="menu"></div> <button id='enable'>Enable</button> 

Jquery:

 $("#menu").kendoMenu({ dataSource:[{text:"Actions",value:1,items:[{text:"First",value:2},{text:"Second",value:2}]}] }); 

Now I want to disable the second element. When I click the button, I want to turn on the menu

 $("#enable").on('click',function(){ // here i want to enable the second }); 

How can i do this.

Answer 1

Try the code below:

 var menu = $("#menu").kendoMenu().data("kendoMenu"); menu.enable("li:last", false); 

Link: http://jsfiddle.net/ramsunvtech/VXEEN/

Updates: December 26, 2016

 var menu = $("#menu").kendoMenu().data("kendoMenu"); $("#enable").on('click', function() { menu.enable("li:last", true); }); $("#disable").on('click', function() { menu.enable("li:last", false); }); 

 <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" /> <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script> <button id='disable'>Disable Last Item</button> <button id='enable'>Enable Last Item</button> <ul id="menu"> <li> Continents <ul> <li> Asia <ul> <!-- moving the UL to the next line will cause an IE7 problem --> <li>India</li> <li>China</li> <li>Japan</li> <li>South Korea</li> </ul> </li> <li>Europe</li> <li>Middle East</li> </ul> </li> </ul> 

API Link: http://docs.telerik.com/kendo-ui/api/javascript/ui/menu

Answer 2

Read this http://docs.kendoui.com/api/web/menu#methods-enable

You must somehow configure the target selection. If, for example, you provide a template for your menu, and your second choice has the identifier "second", then you turn it off.

 var menu = $("#menu").data("kendoMenu"); menu.enable("#second", false); 

Answer 3

To reference any item in the list, you can use : eq jQuery Selector .

 var menu = $("#menu").kendoMenu().data("kendoMenu"); menu.enable("li:eq(1)", false); 

You just need to pass the index of the element as a parameter.