How to disable a kendo Menu subitem

Question

I want to disable a kendo menu sub item dynamically. I have defined the 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 item. On button click i want to enable the menu

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

How can i do this.

Answer 1

Try the below code:

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

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

Updates: 26th Dec 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 Reference: 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 target the selection you want. If for example you provide a template for your menu, and your second selection has the id "second" then this is how you disable it

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