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!