Kendo Grid - Total number of items are not setting properly ( I am using Ajax call to populate remote data)

Question

I have strange issue while setting the total record count for the Kendo Grid. I am populating the grid based on a search query. The results is loaded upon the submit button click .

Grid pagination is controlled though server side code. So the search results are reduced to the subset of the result and the number of records retrieved are as per the page size set for the grid . I also mentioned a field to get the total number of results .

After the server side execution , the results are send back in JSON format . The response contains the result data and the TotalRecordCount .

I am setting the results to the Grid like this (This works !) $('#SearchResult').data('kendoGrid').dataSource.data(response.SearchResults) But the problem is ,number of pages is always sets to 1

I tried setting the "total" property of the Grid datasource explicitly ,

$('#SearchResult').data('kendoGrid').dataSource.total(response.TotalResults) but this is not setting properly

I tried different methods

 var dataSource = new kendo.data.DataSource({
                            data: response.SearchResults,
                            total: response.TotalRecordNumbers
                        }); 

 var resultGrid = $('#SearchResult').data('kendoGrid');
                        resultGrid.setDataSource(dataSource);//does not work 

I am able to populate the results, but the issue is since the total is not set properly, the pagination is not working .

Any help is much appreciated . Thank you

Answer 1

You have to set the 'total' on the schema, not on the dataSource itself.

var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  serverGrouping: true,
  schema: {
    total: function(response) {
      return response.total;
    }
  }
});

This example is copied from the official Doku