Добавление постепенного исчезновения в выбор строки сетки - PullRequest
Новая
       7

Добавление постепенного исчезновения в выбор строки сетки

0 голосов
/ 16 сентября 2018

В этом StackBlitz У меня есть кендо для угловой сетки. При нажатии на кнопку второй ряд будет выделен через полсекунды и автоматически не выбран через две секунды.

Что мне нужно, чтобы выбранная строка появлялась при выделении и исчезала через две секунды, возможно ли это? 

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

1 Ответ

0 голосов
/ 17 сентября 2018

Не уверен, что это наиболее оптимизированное решение, но вы можете использовать:

С помощью этой функции и события вы можете добавить собственный класс к выбранным строкам и использовать 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};
        }
    }
}

- EDIT --

Только что заметил, что вы хотите сделать это только со вторым рядом. В этом случае вы можете заменить строку e.selectedRows[0].dataItem.isSelected = true; на: products[1].isSelected = true;.

И использоватькнопка для вызова функции onSelect.

...