Adding fade in/out to grid row selection - kendo-ui

Question

In this StackBlitz I have a Kendo for Angular grid. When you click on the button, the second row will be selected after half second, and unselected automatically after two seconds.
What I need is the selected row to fade-in on selection and fade-out after two seconds, is this possible?
#Component({
selector: 'my-app',
template: `
<button type="button" (click)="select()">Select</button>
<kendo-grid [data]="gridData" [height]="410"
kendoGridSelectBy="ProductID" [(selectedKeys)]="selection">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
selection: number[] = [];
public gridData: any[] = products;
select(){
setTimeout(() => {
this.selection = [2];
setTimeout(() => {
this.selection = [];
}, 2000);
}, 500);
}
}

Answer 1

Not sure if this is the most optimized solution, but you can use:
rowClass (https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-rowclass)
selectionChange (https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-selectionchange)
With that function and event, you can add a custom class to your selected rows and use CSS for the fade animation. Your code would be something like this:
import { Component } from '#angular/core';
import { products } from './products';
import { Component, ViewEncapsulation } from '#angular/core';
import { RowClassArgs } from '#progress/kendo-angular-grid';
#Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.None,
styles: [`
.k-grid tr.isSelected {
background-color: #41f4df;
transition: background-color 1s linear;
}
.k-grid tr.isNotSelected {
background-color: transparent;
transition: background-color 2s linear;
}
`],
template: `
<kendo-grid [data]="gridData"
[height]="410"
kendoGridSelectBy="ProductID"
[rowClass]="rowCallback"
(selectionChange)="onSelect($event)">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = products;
public onSelect(e){
setTimeout(() => {
e.selectedRows[0].dataItem.isSelected = true;
setTimeout(() => {
e.selectedRows[0].dataItem.isSelected = false;
}, 2000);
}, 500);
}
public rowCallback(context: RowClassArgs) {
if (context.dataItem.isSelected){
return {
isSelected: true,
};
} else {
return {isNotSelected: true};
}
}
}
-- EDIT --
Just noticed that you want to do that only with the second row. In that case, you can replace line e.selectedRows[0].dataItem.isSelected = true; with: products[1].isSelected = true;.
And use your button to call the onSelect function.