dataSource.pageSize(x) triggers call to server

2 posts, 0 answers
  1. Peter
    Peter avatar
    9 posts
    Member since:
    Dec 2013

    Posted 24 May Link to this post

    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?

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 May Link to this post

    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!
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top