Change row style when expand on Kendo UI Grid

Question

I have an angular 5 application with the library Kendo UI. In this application I try to add some styles to a Kendo UI grid. So, I want to change the style of a row when the user expand this row to see the details.

In my grid I have

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

So I get an event when the row is expanded or collapsed but I don't know how to change the style of this row.

Do you have an idea ?

Answer 1

One option would be to keep track of the expanded rows via the detailCollapse and detailExpand events (either by index or some kind of id ).

Once you are tracking the currently expanded rows, utilize the rowClass input to add a new css-class if the current row/dataItem is expanded.

Example: ( Plunker )

@Component({ ... })
export class MyComponent {
    expandedRows = [];

    onExpand(event) {
        // add index/id to this.expandedRows
    }

    onCollapse(event) {
        // remove index/id from this.expandedRows
    }

    rowCallback(context: RowClassArgs) {
        // if index/id from context is in this.expandedRows
        // return a custom css-class
    }
}