Post
Ask Question

Working with Menu in Kendo UI using MVVM Pattern

We can  Implement the menu in Kendo UI using MVVM Pattern just in two step.
 
Step 1: Create an HTML page using any text editor in my case I named it as KenodMenu.html and write the following code in it. 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Untitled</title>  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <div id="example" class="container">  
  19.         <div class="row">  
  20.             <ul data-role="menu" style="width: 50%;">  
  21.                 <li> Home  
  22.                     <ul>  
  23.                         <li> Furniture  
  24.                             <ul>  
  25.                                 <!-- moving the UL to the next line will cause an IE7 problem -->  
  26.                                 <li>Sofas</li>  
  27.                                 <li>Beds</li>  
  28.                             </ul>  
  29.                         </li>  
  30.                     </ul>  
  31.                 </li>  
  32.                 <li> Electronics  
  33.                     <ul>  
  34.                         <li> Mobiles </li>  
  35.                         <li> Laptops </li>  
  36.                     </ul>  
  37.                 </li>  
  38.             </ul>  
  39.         </div>  
  40.     </div>  
  41. </body>  
  42.   
  43. </html>  
The data-role property is used to set the menu 
 
JavaScript  with MVVM model
 
  1. var viewModel = kendo.observable({  
  2.        isVisible: true,  
  3.          
  4.    });  
  5.    kendo.bind($("#example"), viewModel);  
 From the above script we are going to enable the Kendo Menu. 
 
 Result in Browser