给剑道数据源一个角度范围变量 [英] Give kendo datasource an angular scope variable
问题描述
我目前正在尝试用远程数据填充剑道网格.Kendo 有自己的函数来获取数据，但我想使用我创建的 angular factory.
所以我有一个工厂，它有一个函数getSkills".该函数从我的 api 中获取所有技能对象.
angular.module('MyApp').factory('Factory', function ($resource) {返回 $resource('/api/v1/skills/', { },{getSkills: { 方法: 'GET', isArray: true }});});在我的 angular 技能控制器中，我将这些获取的技能放在一个范围变量中.
$scope.skills = SkillFactory.getSkills();我在这里初始化 Kendo 网格:
$scope.gridOptions = {数据源: {数据:$scope.skills，架构:{模型: {字段:{ID:{类型:数字"}，名称:{ 类型:字符串"}，CreatedBy: { type: "number" },CreatedDate: { type: "string" },EditedBy: { type: "number" },EditedDate: { type: "string" },使用中:{ 类型:布尔型"}}}},页面大小:20},可滚动:真实，可排序:真实，可过滤:真实，可分页:{输入:真实，数字:假},可选:真，列: [{ 字段:名称"，标题:技能名称"，宽度:130px"}]};大多数时候，ajax回调比kendo网格的初始化慢.然后它会显示一个空表，因为表的数据没有绑定到 angular $scope.skills 变量.
我到处搜索，但我无法弄清楚如何在初始化中为数据属性使用自定义函数，或者如何将范围变量绑定到表.
任何帮助将不胜感激！
我找到了一个更简单的解决方案:在我的例子中，$scope.regs 定义了使用 Angular 从服务器 REST 服务更新的数据$resource 与AppService"一起公开.该服务定义为:
var registrationServices = angular.module('registrationServices', ['ngResource']);registrationServices.factory('AppService', ['$resource',功能($资源){返回 $resource('休息/注册');}]);我在 HTML 中将 k-auto-bind = "false" 设置为网格定义:
<label for="appId" class="info">AppId:</label><input id="appId" ng-model="searchAppId"><button id="search" class="k-button" ng-click="doSearch()" >搜索</button><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 = 数据"k-auto-bind="false" >
我没有使用data"属性绑定Kendo网格数据源，而是使用transport"和read"定义为函数，类似这样:
$scope.regs;$scope.registrations = new kendo.data.DataSource({运输: {阅读:功能(选项){options.success($scope.regs);}},架构:{模型: {字段:{注册 ID:{类型:编号"}，clientFullName: {type: "string"},注册日期2:{类型:编号"}，注册日期:{类型:日期"}}}},页面大小:5，服务器分页:真，服务器过滤:真，服务器排序:true});$scope.registrationsColumns = [{"field": "registrationId", "title": "Id"},{"field": "clientFullName", "title": "姓名"},{字段":注册日期"，"title": "注册日期",格式:{0:dd/MM/yyyy}"，可过滤:{ui:dateFilter，额外:假"}}];....然后，当我想刷新网格中的数据时，我使用 Angular $resource 使用回调.:
$scope.doSearch = function() {$scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) {$scope.registrations.read();});};它有效.此解决方案的另一个优点是，您不必将网格创建转移到 Java Script 代码中，它可以保留在 HTML 中.
I'm currently trying to fill a kendo grid with remote data. Kendo has its own function to fetch the data, but I want to use the angular factory which I created.
So I have a factory, which has a function "getSkills". This function obtains all the skill objects from my api.
angular.module('MyApp').factory('Factory', function ($resource) {
return $resource('/api/v1/skills/', { },
{
getSkills: { method: 'GET', isArray: true }
});
});
In my SkillController in angular, I put these fetched skills in a scope variable.
$scope.skills = SkillFactory.getSkills();
I initialize the Kendo grid here:
$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" }
]
};
Most of the times, the ajax callback is slower than the initialization of the kendo grid. Then it will show an empty table, because the data of the table isn't bound to the angular $scope.skills variable.
I have searched everywhere, but I can't figure out how I can use a custom function for the data attribute in the initialization, or how to bind the scope variable to the table.
Any help would be appreciated!
I found a little simpler solution: In my case $scope.regs defines the data which is updated from server REST service using Angular $resource exposed with "AppService". This service is defined as:
var registrationServices = angular.module('registrationServices', ['ngResource']);
registrationServices.factory('AppService', ['$resource',
function($resource) {
return $resource('rest/registrations');
}]);
I set k-auto-bind = "false" to grid definition in 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>Instead of binding Kendo grid datasource using "data" property, I used "transport" with "read" defined as function, something like that:
$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"} } ]; ....Then, when I want to refresh data in the grid, I use callback using Angular $resource. :
$scope.doSearch = function() { $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { $scope.registrations.read(); }); };
It works. Additional advantage of this solution is, you don't have to move grid creation to Java Script code, it can stay in HTML.
这篇关于给剑道数据源一个角度范围变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
