CODEWITHSUNDEEP
angularkendo-uikendo-grid
Adrien
Adrien

Reputation: 2934

Change row style when expand on Kendo UI Grid

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 ?

Upvotes: 0

Views: 1135

Answers (1)

Philipp
Philipp

Reputation: 1884

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

Upvotes: 3

Related Questions