This is a migrated thread and some comments may be shown as answers.

the pager of a grid isn't initialzed correctly if the data is loaded asynchronously

1 Answer 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christoph
Top achievements
Rank 1
Christoph asked on 24 Aug 2015, 08:06 AM

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. 
13. 
14.    <script src="http://code.jquery.com/jquery-1.9.1.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>

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 26 Aug 2015, 07:07 AM

Hello Christoph,

The cause for the issue you have described is that the total number of records is not provided to the DataSource. You should either pass the total number of records from the response (and use the schema.total to set the name of the response field) or in your case (where no serverPaging is used) calculate the total in the schema.total function. Here is the updated dojo, demonstrating the second approach.

Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Christoph
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or