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.
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>Untitled</title>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
- </head>
-
- <body>
- <div id="example" class="container">
- <div class="row">
- <ul data-role="menu" style="width: 50%;">
- <li> Home
- <ul>
- <li> Furniture
- <ul>
- <!-- moving the UL to the next line will cause an IE7 problem -->
- <li>Sofas</li>
- <li>Beds</li>
- </ul>
- </li>
- </ul>
- </li>
- <li> Electronics
- <ul>
- <li> Mobiles </li>
- <li> Laptops </li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </body>
-
- </html>
The data-role property is used to set the menu
JavaScript with MVVM model
- var viewModel = kendo.observable({
- isVisible: true,
-
- });
- kendo.bind($("#example"), viewModel);
From the above script we are going to enable the Kendo Menu.
Result in Browser