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

dataSource.pageSize(x) triggers call to server

1 Answer 203 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 24 May 2016, 05:10 PM

I have a grid that I have setup to dynamically change the pageSize based on the window size. When the browser window size changes I call the following code:

var grid = $("#grid").data("kendoGrid");

var currentPage = grid.dataSource.page();
var currentPageSize = grid.dataSource.pageSize();

if (currentPageSize !== newPageSize) {
    grid.dataSource.pageSize(newPageSize);
}

This works fine, but I noticed that the call to .pageSize(x) triggers a POST request to the server to fetch new data. Whenever I fetch new data from the server I need to run code based on whether or not the call to the server is successful or a failure. For example, when I want to refresh this grid manually (without changing the pageSize) I call:

grid.dataSource.read().then(function () {
    doStuffOnSuccess();
}).fail(function () {
    doStuffOnFailure();
});

Unfortunately there is no promise returned from the pageSize() method that would allow me to hook into the actual result of the POST request sent. As a result I have to call both the pageSize(x) and the manual grid.dataSource.read() methods together, and this generates two POST requests that degrades performance.

Is there some way of passing a new pageSize in the grid.dataSource.read() method? Or some way of seeing if the POST request triggered by pageSize(x) was successful or failed?

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 30 May 2016, 06:51 AM

Hello Peter,

In order to be notified you could hook to the change and error events. You could even wrap them in a promise, similar to the following:

var promise = $.Deferred(function(deferred) {
  dataSource.one("change", function() {
    deferred.resolve();
  }).one("error", function() {
    deferred.reject();
  });
});
 
promise.then(function () {
 console.log("success");
}).fail(function () {
  console.log("error");
});
 
dataSource.pageSize(10);

Another way will be to use the query method. Note that beside the pageSize parameter, you will need to also pass the current DataSource page, sort, group, filter, etc. descriptors in order to persist them.

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
Peter
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or