Cung cấp cho nguồn dữ liệu kendo một biến phạm vi góc

Question

Tôi hiện đang cố gắng lấp đầy lưới kendo bằng dữ liệu từ xa. Kendo có chức năng riêng để lấy dữ liệu, nhưng tôi muốn sử dụng nhà máy góc mà tôi đã tạo.

Vì vậy, tôi có một nhà máy có chức năng "getSkills". Hàm này lấy tất cả các đối tượng kỹ năng từ api của tôi.

angular.module('MyApp').factory('Factory', function ($resource) { 
    return $resource('/api/v1/skills/', { }, 
     { 
      getSkills: { method: 'GET', isArray: true } 
     }); 
});  

Trong SkillController ở góc cạnh, tôi đặt những kỹ năng được tìm nạp này vào biến phạm vi.

$scope.skills = SkillFactory.getSkills(); 

tôi khởi tạo lưới Kendo ở đây:

$scope.gridOptions = { 
       dataSource: { 
        data: $scope.skills, 
        schema: { 
         model: { 
          fields: { 
           ID: { type: "number" }, 
           Name: { type: "string" }, 
           CreatedBy: { type: "number" }, 
           CreatedDate: { type: "string" }, 
           EditedBy: { type: "number" }, 
           EditedDate: { type: "string" }, 
           InUse: { type: "boolean" } 
          } 
         } 
        }, 
        pageSize: 20 
       }, 
       scrollable: true, 
       sortable: true, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       selectable: true, 
       columns: [ 
        { field: "Name", title: "skillname", width: "130px" } 
       ] 
      }; 

Hầu hết các lần, gọi lại ajax là chậm hơn so với việc khởi tạo của lưới điện kendo. Sau đó, nó sẽ hiển thị một bảng trống, vì dữ liệu của bảng không bị ràng buộc với biến $ scope.skills $ góc.

Tôi đã tìm kiếm ở khắp mọi nơi, nhưng tôi không thể tìm ra cách tôi có thể sử dụng hàm tùy chỉnh cho thuộc tính dữ liệu trong khởi tạo hoặc cách liên kết biến phạm vi với bảng.

Mọi trợ giúp sẽ được đánh giá cao!

Answer 1

Tôi tìm thấy một giải pháp đơn giản hơn: Trong trường hợp của tôi $ scope.regs xác định dữ liệu được cập nhật từ dịch vụ REST của máy chủ sử dụng Angular $ tài nguyên được hiển thị với "AppService". Dịch vụ này được định nghĩa là:

var registrationServices = angular.module('registrationServices', ['ngResource']); 

    registrationServices.factory('AppService', ['$resource', 
     function($resource) { 
      return $resource('rest/registrations'); 
    }]); 

1. tôi đặt k-auto-bind = "false" để định nghĩa lưới trong HTML:

   <div id="form-item"> 
   <label for="appId" class="info">AppId:</label> 
   <input id="appId" ng-model="searchAppId"> 
   <button id="search" class="k-button" ng-click="doSearch()" >Search</button> 
   </div> 
   
   <div kendo-grid k-data-source="registrations" k-selectable="'row'" 
       k-pageable='{ "refresh": true, "pageSizes": true }' 
       k-columns="registrationsColumns" 
       k-sortable="true" k-groupable="true" k-filterable="true" 
       k-on-change="selectedItem = data" 
       k-auto-bind="false" > 
   </div> 
   

2. Thay vì ràng buộc Kendo lưới nguồn dữ liệu sử dụng "dữ liệu "thuộc tính, tôi đã sử dụng" phương tiện "với" đọc "được định nghĩa là chức năng, như sau:

   $scope.regs; 
   
   $scope.registrations = new kendo.data.DataSource({ 
       transport: { 
        read: function(options) { 
         options.success($scope.regs); 
        } 
       }, 
       schema: { 
        model: { 
         fields: { 
          registrationId: {type: "number"}, 
          clientFullName: {type: "string"}, 
          registrationDate2: {type: "number"}, 
          registrationDate: {type: "date"} 
         } 
        } 
       }, 
       pageSize: 5, 
       serverPaging: true, 
       serverFiltering: true, 
       serverSorting: true 
   }); 
   
   
   $scope.registrationsColumns = [{"field": "registrationId", "title": "Id"}, 
       {"field": "clientFullName", "title": "Name"}, 
       {"field": "registrationDate", 
        "title": "Registration Date", 
        format: "{0:dd/MM/yyyy}", 
        filterable: {ui: dateFilter, extra: "false"} 
       } 
   ]; 
       .... 
   

3. Sau đó, khi Tôi muốn làm mới dữ liệu trong lưới, tôi sử dụng gọi lại bằng cách sử dụng tài nguyên Angular $. :

   $scope.doSearch = function() { 
       $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { 
        $scope.registrations.read(); 
       }); 
   }; 
   

Nó hoạt động. Lợi thế bổ sung của giải pháp này là, bạn không phải di chuyển tạo lưới sang mã Java Script, nó có thể ở dạng HTML.

Answer 2

tôi cố định này làm như sau:

Tôi đưa chức năng tài nguyên của tôi gọi lại như thế này:

SkillFactory.getSkills({}, 
    function success(data) { 
     createGrid(data); 
    }); 

Trong chức năng createGrid (dữ liệu); Tôi khởi tạo dữ liệu như sau:

function createGrid(gridData) { 
$("#skillGrid").kendoGrid({ 
    dataSource: { 
    data: gridData, 
    schema: { 
     model: { 
     fields: { 
       ID: { type: "number" }, 
       Name: { type: "string" }, 
       CreatedBy: { type: "number" }, 
       CreatedDate: { type: "string" }, 
       EditedBy: { type: "number" }, 
       EditedDate: { type: "string" }, 
       InUse: { type: "boolean" } 
       } 
      } 
      }, 
     pageSize: 20 
     }, 

Vì vậy, trong thuộc tính dữ liệu của khởi tạo, tôi đặt dữ liệu khi được tìm nạp thành công. Tôi hy vọng điều này sẽ hữu ích!

Answer 3

Bạn đã xem lời hứa $ q trong Angular chưa? Xem $q promises in Angular

Answer 4

Điều gì đó giống như vậy sẽ giúp bạn đi đúng hướng. Bạn có thể gọi đơn giản nhà máy của bạn từ trong phương thức đọc phương tiện. Bạn không thể trộn và kết hợp chúng hoặc tất cả các bạn đọc, tạo và phá hủy các phương thức phải sử dụng một nhà máy hoặc tất cả chúng phải gọi một cách rõ ràng url cuối cùng: '/ api/myservice /' Thay vì sử dụng $ http chỉ cần tiêu thụ nhà máy của bạn giống như bạn ở bất kỳ địa điểm nào khác trong ứng dụng của bạn:

$scope.Source = new kendo.data.DataSource({ 

    transport: { 

     read: function (options) { 

      return $http.post('/api/getReportData/', {sDate: '', eDate: ''}) 
       .success(function (data) { 

        options.success(data); 
        Toaster.Info("Refreshed"); 

       }) 
       .error(function() { 
        return; 
       }); 

      console.log("mmm"); 
     } 

    } 

});