Question

In this StackBlitz我有一个Kendo for Angular网格。当您单击按钮时，第二行将在半秒后被选中，两秒钟后将自动取消选择。

我需要的是选定的行在选择时淡入并在两秒钟后淡出，这可能吗？

@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

不确定这是否是最优化的解决方案，但是您可以使用：

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）

有了该功能和事件，您可以将自定义类添加到选定的行，并将CSS用于淡入淡出动画。您的代码将如下所示：

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

-编辑-

仅注意到您只想对第二行执行此操作。在这种情况下，您可以将e.selectedRows[0].dataItem.isSelected = true;行替换为：products[1].isSelected = true;。

并使用按钮调用onSelect函数。

为网格行选择添加淡入/淡出

1 个答案: