This is a migrated thread and some comments may be shown as answers.

Group Collapse All with Endless Scroll

2 Answers 44 Views
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 18 Sep 2018, 01:05 AM

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!

2 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 18 Sep 2018, 11:08 PM

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

 

0
Viktor Tachev
Telerik team
answered on 19 Sep 2018, 10:17 AM
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.
Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or