Post
Ask Question

Implement the Kendo Grid with MVVM Pattern

Kendo Grid with MVVM Pattern 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="example">  
  19.         <div data-role="grid"  
  20.              data-editable="true"  
  21.              data-columns="[  
  22.                                 { 'field':'id','title':'Id', 'width': 270  },  
  23.                                  { 'field':'name', 'width': 270 , 'title':'Fruits Name'},  
  24.                                    
  25.                               ]"  
  26.              data-bind="source: fruits,  
  27.                             visible: isVisible"  
  28.                               
  29.              style="height: 200px"></div>  
  30.     </div>  
  31.     <script>  
  32.     var viewModel = kendo.observable({  
  33.         isVisible: true,  
  34.   
  35.    fruits: new kendo.data.DataSource({  
  36.           data: [  
  37.             { id: 1, name: "Apples" },  
  38.             { id: 2, name: "Oranges" },  
  39.             { id: 3, name: "Bananas" }  
  40.           ],  
  41.           schema: {  
  42.             model: {  
  43.               fields: {  
  44.                 id: { type: "number" },  
  45.                 name: { type: "string" }  
  46.               }  
  47.             }  
  48.           }  
  49.         })  
  50.        });  
  51.     kendo.bind($("#example"), viewModel);  
  52.     </script>  
  53. </body>  
  54. </html>