Pager not refreshing when updating grid.

4 posts, 0 answers
  1. Jeff
    Jeff avatar
    8 posts
    Member since:
    May 2012

    Posted 05 Mar 2013 Link to this post

    I have a grid that gets populated based on the selection in a treeview.
    function onSelect(e) {
        $('#grid').data('kendoGrid').dataSource.read({ FolderID: $('#treeview').data('kendoTreeView').dataItem(e.node).id });
        $('#currentNode').val($('#treeview').data('kendoTreeView').dataItem(e.node).id);
    }
    It all works great except for the (server side) paging.

    Here's the problem:

    First: I populate the grid with a data set that has 12 pages, and I click on the sixth page.

    Next: When I click on a another tree node for data that only has two pages, it will run dataSource.read to load new data into the grid

    Problem: The request will still send data as if it's still trying to get page 6, instead of resetting page numbers based on the new data set.

    How can I get the pager to reset when I call dataSource.read?
  2.
  3. Rosen
    Admin
    Rosen avatar
    3251 posts

    Posted 07 Mar 2013 Link to this post

    Hi Jeff,

    In order to achieve this I suggest you to take a slightly different approach. Instead passing the selected node value to the DataSource read method you should set it as an additional request parameter of the transport read. This way you will ensure that this value is passed to the server when operations such as paging, sorting etc. are made. Then as you are using server paging you can call only the page method when a new node is selected. This will both reset the page index and send the new selected node data to the server.

    $("#treeview").kendoTreeView({
      select: function() {     
         $("#grid").data("kendoGrid").dataSource.page(1); // issues a request to the server as serverPaging is enabled
      }
    });


    $("#grid").kendoGrid({
       dataSource: { 
           serverPaging: true,
         transport: {
            read: {
              url: "...",
              data: {
                FolderID: function() {
                  var treeView = $('#treeview').data('kendoTreeView');
                  if (treeView.select().length) {
                    return treeView.dataItem(treeView.select()).id;
                  }
                  return 0; // a default value if there is no selection
                }
              }
            }
          }
       }
         //...
    });


    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Doug
    Doug avatar
    19 posts
    Member since:
    Aug 2015

    Posted 17 Feb in reply to Rosen Link to this post

    works fine except for one thing.  If you are on page 6 of one folder, you click on a different folder, that returns you to page one.  all is fine, but when you go back to the original folder (at page 1), you can no longer scroll.  It only shows the first page of items and refuses to scroll forward.
  7. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 20 Feb Link to this post

    Hello, Doug,

    The main reason for this is the discussed issue in the private ticket:

    https://github.com/telerik/kendo-ui-core/issues/4000

    Also, this post is from 2013, and the endless scrolling was introduced in 2017 and the suggested approach is not considering the endless scrolling scenario as the feature was not implemented yet.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8.
Back to Top