如何在剑道网格过滤器上添加延迟

Question

我正在为Angular 2使用Kendo网格组件.我注意到每当我输入一个过滤器(在列标题内)时它会触发stateChanged事件.但我正在调用服务器,所以如何添加某种延迟以避免在每次按键时调用服务器？

Answer 1

H3llo Sam,

等了一段时间让剑道团队加入这样的功能后,我终于决定采用以下方法:

• 我们可以使用BehaviorSubject来保存Kendo Grid的'DataStateChangeEvent'并且还包括时间延迟.这样我们就会丢弃在一定时间内执行的每个网格的状态变化(及其服务器调用).

.ts组件:

...

import {
    Component, trigger, state, animate, transition, style, OnInit, OnDestroy
} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';
import {
    GridComponent, GridDataResult, DataStateChangeEvent
} from '@progress/kendo-angular-grid';
import {
    DataSourceRequestState, DataResult, process, State, GroupDescriptor
} from '@progress/kendo-data-query';
...

export class ExampleComponent implements OnInit, OnDestroy {

// Subscriptions (we will unsubscribe them at ngOnDestroy)
subscriptions: Subscription = new Subscription();

// Grid data
items: GridDataResult;

// Kendo grid initial DataSourceRequestState
defaultDataSourceRequestState =
    { skip: 0, take: 20, group: [], sort: [] } as DataSourceRequestState;

// Kendo grid state BehaviorSubject
stateSubject =
    new BehaviorSubject<DataSourceRequestState>(
        this.defaultDataSourceRequestState
    );

...

constructor(...) {
    // Delay for Kendo grid dataStateChange event of 200 ms
    this.subscriptions.add(
        this.stateSubject
        .debounceTime(200)
        .subscribe(s =>
            this.dataStateChangeCompleted(this.stateSubject.getValue())
        )
    );
}

ngOnDestroy() {
    this.subscriptions.unsubscribe();
}

dataStateChange(stateChange: DataStateChangeEvent) {
    // Set BehaviourSubject´s new state
    this.stateSubject.next(stateChange);
}

dataStateChangeCompleted(stateChange: DataSourceRequestState) {
    // TO DO: Here we can do the Server call or any other action
    // once the delay has finished with the last grid state
    this.getItems(stateChange);
}

...

}

.html模板:

<kendo-grid #g="kendoGrid"
    [data]="items"
    [pageable]="true"
    [pageSize]="(stateSubject | async)?.take"
    [skip]="(stateSubject | async)?.skip"
    [sortable]="true"
    [sort]="(stateSubject | async)?.sort"
    [groupable]="true"
    [group]="(stateSubject | async)?.group"
    [filterable]="true"
    [filter]="(stateSubject | async)?.filter"
    [scrollable]="'scrollable'"
    (dataStateChange)="dataStateChange($event)">

...

</kendo-grid>

我希望这有帮助 :)

问候.