Group Collapse All with Endless Scroll

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    5 posts
    Member since:
    Dec 2016

    Posted 17 Sep 2018 Link to this post

    Hi,

    I am using the Endless Scroll feature and I am trying to implement a "Collapse All Groups" function. The problem is that, with Endless Scroll, I don't have all groups visible when I run my function.

    I am using this code to iterate and collapse groups"

    $(".k-grouping-row").each(function (e) {
      grid.collapseGroup(this);
    });

     

    I tried to do it recursively, like this:

    function collapseAllGroups(grid){
      grid.element.find('.k-grouping-row [aria-expanded="true"]').each(function(e){
        grid.collapseGroup(this.parentElement);
      });
     
      const gridContent = grid.content;
      gridContent.scrollTop(gridContent[0].scrollHeight);
     
      if (grid.element.find('.k-grouping-row [aria-expanded="true"]').length > 0){
        collapseAllGroups(grid);
      }
    }

     

    This works with a small set of data, but when I have more than 500 records, the processes of collapsing takes some time and it breaks my recursive solution.

    I tried to use the groupCollapse event (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/groupcollapse) to trigger my function only after the groups collapsed, but that didn't work either.

    Any ideas or other solutions?

    Thanks!

  2. Daniel
    Daniel avatar
    5 posts
    Member since:
    Dec 2016

    Posted 18 Sep 2018 in reply to Daniel Link to this post

    UPDATE

    I was able to come up with a solution using the "change" event of the dataSource. What I am doing is scrolling the page to the bottom and, on the change event, check if I have all data loaded. If I do, I just collapse all groups. If not, I call the scroll function again.

    Not sure if this is the best way to do it, but I didn't find another option with Kendo UI. Here is my updated code:

    Change event:

    function dataChangeEvent(e){
      let loadedRecords = e.items.reduce((total, item) => {
        return total += item.items.length;
      }, 0)
      let totalRecords = e.sender.data().length;
     
      if (loadedRecords === totalRecords){
        collapseAllGroups(false)
      } else {
        collapseAllGroups(true)
      }
    }

     

    Scroll function:

    function collapseAllGroups(isLoading){
      if (!isLoading){
        currentGrid.unbind('change', dataChangeEvent);
        currentGrid.element.find('.k-grouping-row [aria-expanded="true"]').each(function(e){
          currentGrid.collapseGroup(this.parentElement);
        });
      }
     
      let gridContent = currentGrid.content;
      gridContent.scrollTop(gridContent[0].scrollHeight);
    }

     

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 19 Sep 2018 Link to this post

    Hi Daniel,

    Thank you for sharing your approach with the community. This can help someone looking for a similar feature. 


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top