Collapse Kendo UI Grid details programmatically in

Question

I have an angular 5 application with the library kendo UI. In this application I have a Kendo UI Grid with details on some rows. The grid is also sortable. I want to collapse all the details expanded when I click on the name of a column to sort the data.

This is my html code :

<kendo-grid
#grid
[kendoGridBinding]="getDataService().listOfSolution"
[resizable]="false"
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[filterable]="false"
[groupable]="false"
[reorderable]="false"
[selectable]="false"
[scrollable]="'none'"
(dataStateChange)="onSort($event)"
[rowClass]="rowCallback()"
(detailCollapse)="onCollapse($event)"
(detailExpand)="onExpand($event)"
style="border: none;">
...
</kendo-grid>

But I don't find the way to close the details programmatically.

Do you have an idea ?

Answer 1

You can collapse a master-row via the collapseRow function (API Reference).

Below you can find a sample, how your specific use-case could be tackled.

@Component({ ... })
export class MyComponent {
    onExpand(event) {
        // keep track of all expanded rows (index)
    }

    onCollapse(event) {
        // keep track of all expanded rows (index)
    }

    onSortChange(event) { // either (sortChange) or (dataStateChange)
        // iterate all expanded rows & collapse them via `this.grid.collapseRow(index)`
    }
}