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: true31. },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
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