title: Kendo Pager (pageable) is showing 'No items to display' even if the record are there
body: <p>Here Ia m using Kendo-UI with Angular-JS. </p>
  
  <p>Facing an issue while integrating Pagination (pageable) on Kendo grid table, it showing 'No items to display' even if the data (records) are loaded properly.</p>
  
  <p>Not sure whats wrong with it, Any help would be appropriated...</p>
  
  <p>Following is the function I am using to load/init the data grid.</p>
  
  <pre><code>function getProjectsAtAGlance() {
                  $scope.gridOptions = {
                      scrollable: false,
                      sortable: true,
                      pageable: {
                          pageSizes: [5, 10, 15, 20, 25, 50]
                      },
                      change: function (e) {
                          $scope.pageSize = $scope.gridOptions.dataSource.pageSize();
                      },
                      dataSource: {
                          serverPaging: true,
                          transport: {
                              read: function (options) {
  
                                  $scope.options = options;
  
                                  var filters = {
                                      skip: options.data.skip,
                                      take: options.data.take,
                                      sortBy: $scope.sortBy,
                                      projectGlanceIncludeArchived: $scope.includeArchivedProjects,
                                      projectGlanceExcludeProjectsWithNoBudgets: $scope.excludeProjectsWithNoBudgets
                                  };
  
                                  $http.post("/Home/ProjectsAtAGlanceReport", filters)
                                      .success(function (result) {
                                          var projects = result.projects;
  
                                          for (var i = 0; i &lt; projects.length; i++) {
                                              var project = projects[i];
                                              project.startDate = moment(projects[i].startDate).format("L");
                                              project.endDate = moment(projects[i].endDate).format("L");
                                          }
  
                                          options.success(projects);
  
                                      })
                                      .error(function (error) {
                                          console.log(error);
                                      });
                              }
                          },
                          pageSize: $scope.pageSize,
  
                          schema: {
                              total: function (respose) {
                                  return $scope.data;
                              },
  
                              model: {
                                  fields: {
                                      name: {
                                          editable: false,
                                          nullable: true
                                      },
                                      resourceCount: {
                                          editable: false,
                                          nullable: true
                                      },
                                      clientName: {
                                          editable: false,
                                          nullable: true
                                      },
                                      startDate: {
                                          editable: false,
                                          nullable: true
                                      },
                                      endDate: {
                                          editable: false,
                                          nullable: true
                                      },
                                      projectId: {
                                          editable: false,
                                          nullable: true
                                      },
                                      projectedBudgetPercentage: {
                                          defaultValue: 100
                                      },
                                      defaultValue: {
                                          totalBudget: 0,
                                          totalHours: 0,
                                          burnedBudget: 0,
                                          burnedHours: 0,
                                          projectedBudget: 0,                                         
                                          projectedHours: 0,
                                          projectedHoursPercentage: 0,
                                          remainingBudget: 0,
                                          remainingBudgetPercentage: 0,
                                          remainingHours: 0,
                                          remainingHoursPercentage: 0
                                      }
                                  }
                              }
                          }
                      },
  
                      columns: [
                          {
                              template: "&lt;div class='name-column'&gt;" +
                                  "&lt;p&gt;&lt;a class='highlighted-blue' href='/Projects/ProjectAdmin/{{dataItem.projectId}}'&gt;{{dataItem.name}}&lt;/a&gt;&lt;/p&gt;" +
                                  "&lt;small&gt;{{dataItem.clientName}}&lt;/small&gt;" +
                                  "&lt;small ng-if=\"dataItem.startDate !== 'Invalid date'\"&gt;{{dataItem.startDate}} - {{dataItem.endDate}}&lt;/small&gt;" +
                                  "&lt;small ng-if=\"dataItem.startDate === 'Invalid date'\"&gt;&lt;i class='fa fa-exclamation-triangle text-danger'&gt;&lt;/i&gt; Start date and end date are not defined.&lt;/small&gt;" +
                                  "&lt;small&gt;{{dataItem.resourceCount}} Resources&lt;/small&gt;&lt;/div&gt;"
  
                          },
                          {
                              template: kendo.template($("#kendoProgressBarColumnTemplate").html())
                          },
                          {
                              template: "&lt;accuracy-gauge-per-project accuracy='dataItem.accuracy'&gt;&lt;/accuracy-gauge-per-project&gt;"
                          },
                          {
                              template:
                                  "&lt;p&gt;{{dataItem.accuracy | percentage:0}} Accurate&lt;/p&gt;" +
                                  "&lt;p&gt;{{100-dataItem.accuracy | percentage:0}} Non Accurate&lt;/p&gt;"
                          }
                      ]
                  };
              }
  </code></pre>
  
  <p>Here is an output snippets for reference.
  <a href="https://i.stack.imgur.com/0Pa25.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Pa25.png" alt="Kendo Grid with Pagination"></a></p>