Sorting columns does not reset to first page

3 posts, 1 answers
  1. Tim Eck
    Tim Eck avatar
    3 posts
    Member since:
    Apr 2010

    Posted 31 May 2013 Link to this post

    I need to reset to the first page after sorting the grid. I was trying to use the change event like i was doing when changing page which works perfectly here is my example on how I keep track of my paging.
       var pageable = false;
              if (self.Pageable == true)
                  pageable = {
                      refresh: false,
                      pageSizes: self.PageSizes,
                      change: function(e) {
                          if (typeof (Storage) !== "undefined") {
                              localStorage.setItem(self.PageStorageVariable, self.Grid().dataSource.page());
                          }
                      }
                  };

    and then apply pageable variable to my grid definition
       var g = {
                  scrollable: false,
                  pageable : pageable ,
                  ...
      }

    Every time I change a page it gets stored in my local storage and then I do some stuff with it.

    I need the same functionality for sorting but only on the on change event:

      var sortable = false;
              if (self.Sortable == true)
                  sortable = {
                      mode: "single",
                      allowUnsort: true,
                      change: function (e) {
                          console.log('here');
                      }
                  };

              var g = {
                  scrollable: false,
                  pageable : pageable ,
                  sortable : sortable,
                 ...
             };

    But in this case every time I apply a new sort its not firing my on change function, any ideas on how can I intercept the onSort event so I can reset to page 1 when sorting?
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 04 Jun 2013 Link to this post

    Hello Tim,

    Basically such behavior is not supported. However you can try to use the dataSource requestStart event to check if the Grid is about to sort, if it is then prevent the requestStart event and use the query method to perform sorting + paging to the first page.

    e.g.

    requestStart:function(e){
      var newState = JSON.stringify(this.sort()); 
      if(newState!=sortState){ //where sortState is a global variable
        sortState = newState;
        e.preventDefault();
        this.query({sort:this.sort(),page:1});
      }
    },

    Let me know your findings.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tim Eck
    Tim Eck avatar
    3 posts
    Member since:
    Apr 2010

    Posted 04 Jun 2013 Link to this post

    Hi Petur,

    Thanks for your response. I did try using requestStart but I needed something more specific since every request (load, change page, sorting, etc) use this method, I wanted to avoid verifying the sort() function since there can be request where sort is null but not necessarily means that sort hasn't change.

    I have implemented a solution that works as expected, but I wanted to know if there was a more elegant way to do it instead of checking sort every request.
Back to Top