Дайте Kendo datasource переменную угловой области
В настоящее время я пытаюсь заполнить сетку кендо с удаленными данными. У Kendo есть своя функция для извлечения данных, но я хочу использовать угловую фабрику, которую я создал.
Итак, у меня есть фабрика, которая имеет функцию "getSkills". Эта функция получает все объекты навыков из моего api.
angular.module('MyApp').factory('Factory', function ($resource) {
return $resource('/api/v1/skills/', { },
{
getSkills: { method: 'GET', isArray: true }
});
});
в моем SkillController в angular я поместил эти извлеченные навыки в переменную области.
$scope.skills = SkillFactory.getSkills();
Я инициализирую сетку кендо здесь:
$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" }
]
};
В большинстве случаев обратный вызов ajax медленнее, чем инициализация сетки кендо. Затем он покажет пустую таблицу, потому что данные таблицы не привязаны к угловой области$.навыки варьируются.
Я искал везде, но я не могу понять, как я могу использовать пользовательскую функцию для атрибута данных в инициализации или как привязать переменную области к таблице.
любая помощь будет оценили!
4 ответов
Я нашел немного более простое решение: В моем случае $ scope.regs определяет данные, которые обновляются из службы REST сервера с помощью Angular $ресурс, предоставляемый с помощью "AppService". Эта услуга определяется как:
var registrationServices = angular.module('registrationServices', ['ngResource']);
registrationServices.factory('AppService', ['$resource',
function($resource) {
return $resource('rest/registrations');
}]);
-
Я установил k-auto-bind = "false" в определение сетки в 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> -
вместо привязки источника данных сетки Kendo с помощью свойства "data" я использовал "transport " с" read", определенным как функция, что-то вроде этого:
$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"} } ]; .... -
затем, когда я хочу обновить данные в сетке, я использую обратный вызов, используя Angular $resource. :
$scope.doSearch = function() { $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { $scope.registrations.read(); }); };
это работает. Дополнительным преимуществом этого решения является то, что вам не нужно перемещать создание сетки в код Java-скрипта, он может оставаться в HTML.
что-то вроде этого приведет вас на правильный путь. Вы можете просто вызвать свою фабрику из С в методе чтения транспорта. Вы просто не можете смешивать и сопоставлять их либо все Вы читаете,создаете и уничтожаете методы, которые должны использовать фабрику, либо все они должны явно вызывать конечную точку ie url:'/api/ myservice / ' вместо использования $http просто потребляйте свою фабрику, как вы бы в любом другом месте в своем приложении:
$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");
}
}
});
я исправил это следующим образом:
Я дал моей функции ресурса обратный вызов, как это:
SkillFactory.getSkills({},
function success(data) {
createGrid(data);
});
в функции createGrid( data); я инициализирую данные следующим образом:
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
},
поэтому в атрибуте data инициализации я устанавливаю данные, когда он успешно извлекается. Надеюсь, это поможет!