Adding fade in/out to grid row selection

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

Bruno Monteiro Bruno Monteiro · Accepted Answer · 2018-09-17T02:48:23

Not sure if this is the most optimized solution, but you can use:

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.

Adding fade in/out to grid row selection

1 Answers