Kendo UI ve AngularJS

Question

ile temel veri ızgarası oluşturma AngularJS ile deneme yapıyorum. Basit bir Kendo Grid'i göstermek istiyorum. Bunu saf yönergeler kullanarak yapmaya çalışıyorum. Bunu akılda tutarak, Kendo UI/Angular JS projesine baktım (https://github.com/kendo-labs/angular-kendo). Ne yazık ki, benim

index.html:

<div>Products: {{products.length}}</div> 
<div kendo-grid k-data-source="products" k-selectable="'row'" 
    k-pageable='{ "refresh": true, "pageSizes": true }' 
    k-columns='[ 
    { "field": "Name", "title": "Name"}, 
    { "field": "Department", "title": "Department"}, 
    { "field": "LastShipment", "title": "Last Shipment" } 
    ]'> 
</div> 

controllers.js

function myController($scope) { 
    console.log("initializing controller..."); 
    $scope.products = [ 
     { id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' }, 
     { id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' }, 
     { id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' }, 
     { id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' }, 
     { id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' } 
    ]; 
} 

ben düzgün denetleyici kadar kablolu ettik doğruladık. Etkinlik sayısı uygun şekilde gösterir. Ancak, ızgara görünmüyor. Yanlış yaptığımı anlayamıyorum.

Yardımlarınız için teşekkür ederiz.

Answer 1

Alan adlarının yanlış yazıldığını görür. Benim için aşağıdaki çalışmaları: http://jsbin.com/odeQAfI/2/edit

Bir Kendo DataSource olmak products alanını yapmak gerekir Sayfalayıcıda NaN mesajı önlemek için:: İşte

<div kendo-grid k-data-source="products" k-selectable="'row'" 
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }' 
    k-columns='[ 
    { "field": "name", "title": "Name"}, 
    { "field": "department", "title": "Department"}, 
    { "field": "lastShipment", "title": "Last Shipment" } 
    ]'> 
</div> 

bir canlı tanıtım olduğunu

function MyController($scope) { 
    $scope.products = new kendo.data.DataSource({ 
    data: [ 
     { id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' }, 
     { id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' }, 
     { id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' }, 
     { id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' }, 
     { id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' } 
    ], 
    pageSize: 2 
    }); 
} 

İşte canlı bir tanıtımdır: http://jsbin.com/ODElUfO/2/edit

Answer 2

Ayrıca Fabrika yöntemini kullanarak bir Kendo DataSource'ı AngularJS Hizmeti olarak da ayarlayabilirsiniz. d ve bunu AngularJS en iyi uygulamalarına ve kalıplarına uydurmak için Kontrolörünüze enjekte edin.

Tam kaynak kodu ve canlı demo: http://goo.gl/6Z9jop

Customer.cshtml

@{ 
    ViewBag.Title = "Index"; 
} 

<div> 
    <h2 ng-cloak>{{title}}</h2> 
    <div> 
     <div class="demo-section"> 
      <div class="k-content" style="width: 100%"> 
       <div kendo-grid="grid" 
        k-sortable="true" 
        k-pageable="true" 
        k-filterable="true" 
        k-editable="'inline'" 
        k-selectable="true" 
        k-columns='[ 
         { field: "CustomerID", title: "ID", width: "75px" }, 
         { field: "CompanyName", title: "Company"}, 
         { field: "ContactName", title: "Contact" }, 
         { field: "ContactTitle", title: "Title" }, 
         { field: "Address" }, 
         { field: "City" }, 
         { field: "PostalCode" }, 
         { field: "Country" }, 
         { field: "Phone" }, 
         { field: "Fax" }]' 
> 
       </div> 
       <style scoped> 
        .toolbar { padding: 15px; float: right; } 
       </style> 
      </div> 
     </div> 

     <script type="text/x-kendo-template" id="toolbar"> 
      <div> 
       <div class="toolbar"> 
        <button kendo-button ng-click="edit(this)"><span class="k-icon k-i-tick"></span>Edit</button> 
        <button kendo-button ng-click="destroy(this)"><span class="k-icon k-i-tick"></span>Delete</button> 
        <button kendo-button ng-click="details(this)"><span class="k-icon k-i-tick"></span>Edit Details</button> 
       </div> 
       <div class="toolbar" style="display:none"> 
        <button kendo-button ng-click="save(this)"><span class="k-icon k-i-tick"></span>Save</button> 
        <button kendo-button ng-click="cancel(this)"><span class="k-icon k-i-tick"></span>Cancel</button> 
       </div> 
      </div> 
     </script> 
    </div> 
</div> 

customerController.js

'use strict'; 

northwindApp.controller('customerController', 
    function ($scope, $rootScope, $location, customerDataSource) 
    { 
     customerDataSource.filter({}); // reset filter on dataSource everytime view is loaded 

     var onClick = function (event, delegate) 
     { 
      var grid = event.grid; 
      var selectedRow = grid.select(); 
      var dataItem = grid.dataItem(selectedRow); 

      if (selectedRow.length > 0) 
      { 
       delegate(grid, selectedRow, dataItem); 
      } 
      else 
      { 
       alert("Please select a row."); 
      } 
     }; 

     $scope.toolbarTemplate = kendo.template($("#toolbar").html()); 

     $scope.save = function (e) 
     { 
      onClick(e, function (grid) 
      { 
       grid.saveRow(); 
       $(".toolbar").toggle(); 
      }); 
     }; 

     $scope.cancel = function (e) 
     { 
      onClick(e, function (grid) 
      { 
       grid.cancelRow(); 
       $(".toolbar").toggle(); 
      }); 
     }, 

     $scope.details = function (e) 
     { 
      onClick(e, function (grid, row, dataItem) 
      { 
       $location.url('/customer/edit/' + dataItem.CustomerID); 
      }); 
     }, 

     $scope.edit = function (e) 
     { 
      onClick(e, function (grid, row) 
      { 
       grid.editRow(row); 
       $(".toolbar").toggle(); 
      }); 
     }, 

     $scope.destroy = function (e) 
     { 
      onClick(e, function (grid, row, dataItem) 
      { 
       grid.dataSource.remove(dataItem); 
       grid.dataSource.sync(); 
      }); 
     }, 

     $scope.onChange = function (e) 
     { 
      var grid = e.sender; 

      $rootScope.lastSelectedDataItem = grid.dataItem(grid.select()); 
     }, 

     $scope.dataSource = customerDataSource; 

     $scope.onDataBound = function (e) 
     { 
      // check if there was a row that was selected 
      if ($rootScope.lastSelectedDataItem == null) 
      { 
       return; 
      } 

      var view = this.dataSource.view(); // get all the rows 

      for (var i = 0; i < view.length; i++) 
      { 
       // iterate through rows 
       if (view[i].CustomerID == $rootScope.lastSelectedDataItem.CustomerID) 
       { 
        // find row with the lastSelectedProductd 
        var grid = e.sender; // get the grid 

        grid.select(grid.table.find("tr[data-uid='" + view[i].uid + "']")); // set the selected row 
        break; 
       } 
      } 
     }; 
    }); 

customerDataSource.js

'use strict'; 

northwindApp.factory('customerDataSource', 
    function (customerModel) 
    { 
     var crudServiceBaseUrl = "/odata/Customer"; 

     return new kendo.data.DataSource({ 
      type: "odata", 
      transport: { 
       read: { 
        async: false, 
        url: crudServiceBaseUrl, 
        dataType: "json" 
       }, 
       update: { 
        url: function (data) 
        { 
         return crudServiceBaseUrl + "(" + data.CustomerID + ")"; 
        }, 
        type: "put", 
        dataType: "json" 
       }, 
       destroy: { 
        url: function (data) 
        { 
         return crudServiceBaseUrl + "(" + data.CustomerID + ")"; 
        }, 
        dataType: "json" 
       } 
      }, 
      batch: false, 
      serverPaging: true, 
      serverSorting: true, 
      serverFiltering: true, 
      pageSize: 10, 
      schema: { 
       data: function (data) { return data.value; }, 
       total: function (data) { return data["odata.count"]; }, 
       model: customerModel 
      }, 
      error: function (e) 
      { 
       alert(e.xhr.responseText); 
      } 
     }); 
    });