Fetching some data from a remote server using the angularjs $http-service doesn't initialize the pager of a grid correctly. It seems the pager is initialized before the dataSource is loaded completely. Is there a way to update the pager subsequent to the loading of the dataSource?
The dojo can be found here, otherwise the following code should work similar:
01.
<!DOCTYPE html>
02.
<
html
>
03.
<
head
>
04.
<
meta
charset
=
"utf-8"
>
05.
<
title
>Kendo UI Snippet</
title
>
06.
07.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css"
>
08.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css"
>
09.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css"
>
10.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.min.css"
>
11.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.dataviz.default.min.css"
>
12.
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css"
>
13.
14.
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
15.
<
script
src
=
"http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"
></
script
>
16.
<
script
src
=
"http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"
></
script
>
17.
</
head
>
18.
<
body
>
19.
20.
<
div
ng-app
=
"app"
ng-controller
=
"MyCtrl"
>
21.
<
div
kendo-grid
k-options
=
"gridOptions"
></
div
>
22.
</
div
>
23.
<
script
>
24.
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope, $http) {
25.
$scope.gridOptions = {
26.
columns: [ { field: "FirstName" }, { field: "LastName" } ],
27.
pageable: {
28.
pageSize: 2,
29.
input: true,
30.
refresh: true
31.
},
32.
dataSource: {
33.
schema: {
34.
data: "d"
35.
},
36.
transport: {
37.
read: function (e) {
38.
$http({method: 'GET', url: 'http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees'}).
39.
success(function(data, status, headers, config) {
40.
e.success(data)
41.
}).
42.
error(function(data, status, headers, config) {
43.
alert('something went wrong')
44.
console.log(status);
45.
});
46.
}
47.
},
48.
}
49.
50.
}
51.
});
52.
</
script
>
53.
</
body
>
54.
</
html
>