Kendo UI Angular Grid - Collapse groups and virtual scroll

I'm trying to collapse by default the groups of an Kendo UI Angular Grid with virtual scrolling.

When a column in dragged to the groupping zone, only a group is shown. Only expanding and collapsing the group by hand, the next group becames visible.

<kendo-grid
[kendoGridGroupBinding]="data"
[groupable]="true"
[sortable]="true"
[pageSize]="80"
[rowHeight]="35"
[height]="460"
scrollable="virtual"
(groupChange)="groupChange($event)"
>
<kendo-grid-column field="id" [width]="80" title="ID"></kendo-grid-column>
<kendo-grid-column field="firstName" title="First Name" [width]="130"></kendo-grid-column>
<kendo-grid-column field="lastName" title="Last Name" [width]="130"></kendo-grid-column>
<kendo-grid-column field="city" title="City" [width]="130"></kendo-grid-column>
<kendo-grid-column field="title" title="Title" [width]="180"></kendo-grid-column>
</kendo-grid>



public groupChange(groups: GroupDescriptor[]): void {
console.log('groupChange', groups);
this.collapseAllGroups(groups);
}

public collapseAllGroups(groups): void {
if (this.grid && groups.length > 0) {
for (let i = 0; i < this.data.length; i++) {
this.grid.collapseGroup(i.toString());
}
this.collapsed = true;
}
}


A full example can be found in plnkr: http://plnkr.co/edit/ghVNJlokJwrQ9kRoboWO?p=preview

Is there a way to show all groups collapsed?

Thank's

Continue reading...