[Solved] Group Collapse All with Endless Scroll

[Daniel]

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 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!

[Daniel]

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);
}

 

[Viktor Tachev]

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