I\'m having trouble binding a Kendo grid to an angular service call. I have an angular $http
service that has a getData()
method which looks like this:
I managed to fix it, there's 2 ways (quite possibly more) of doing this:
1. One is to directly give your kendo grid's datasource the adrress of the Api controller:
$scope.companies = new kendo.data.DataSource({
transport: {
read: {
url: '/api/apihome',
dataType: 'json'
},
},
pageSize: 10
});
There's a full explanation here. But I don't like doing this because I'd rather not hard code API controller addresses in my controller, I prefer to have a service or something return me the data and then pass that on to my grid (Imagine for example wanting to add a token in the $http
request headers). So after some messing around I got a way of hooking up the grid with my original approach:
2. We can just hook up the read function of the grid to another function in our service or whatever, which can be any method returning a promise, i.e. a $http
call:
dataSource: {
transport: {
read: function (options) {//options holds the grids current page and filter settings
$scope.getCompanies(options.data).then(function (data) {
options.success(data);
$scope.data = data.data;//keep a local copy of the data on the scope if you want
console.log(data);
});
},
parameterMap: function (data, operation) {
return JSON.stringify(data);
}
},
schema: {
data: "data",
total: "total",
},
pageSize: 25,
serverPaging: true,
serverSorting: true
},
EDIT
Regarding how to add items that are already available to the grid, and how to have subsequent requests to the server to get new data, this is how I've gone about doing this:
The grid has an autoBind
property, setting that to false prevents the grid automatically calling the server when the view is loaded. So to add items manually I set this to false, and then add rows to the grid via the dataSource.add()
method. After that calling dataSource.read()
will retrieve more data from the server:
$scope.companiesGridOptions = {
dataSource: new kendo.data.DataSource({
transport: {
read: function (options) {
var config = {
method: "GET",
url: "/api/companies/GetCompanies"
};
$http(config).success(function (data) {
angular.forEach(data, function(d) {
$scope.companiesGridOptions.dataSource.add(d);
});
});
}
},....
Adding items manually to the grid:
$scope.companiesGridOptions.dataSource.data([{id:1,title:"..."}, {id:2,title:"..."}]);
Calling dataSource.read()
forces a server call to retrieve data:
$scope.companiesGridOptions.dataSource.read();