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

我正在使用剑道网格组件进行角度2。我注意到，每当我输入一个过滤器（在列标题中），它就会触发一个stateChanged事件。但是我正在给服务器打电话，那么我如何才能增加一些延迟，以避免每次按键时都给服务器打电话呢

H3llo Sam

在等待剑道的团队加入这样的功能一段时间后，我最终决定采用以下方法：

• 我们可以使用BehaviorSubject来保存剑道网格“DataStateChangeEvent”，还可以包含一个时间延迟。通过这种方式，我们放弃了在一定时间内执行的每个网格状态更改（及其服务器调用）

.ts组件：

---

。。。
进口{
组件、触发器、状态、动画、过渡、样式、OnInit、OnDestroy
}从“@angular/core”开始；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/fromEvent”；
导入'rxjs/add/operator/debounceTime'；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'rxjs/Subscription'导入{Subscription}；
进口{
GridComponent、GridDataResult、DataStateChangeEvent
}来自“@progress/kendo角度网格”；
进口{
DataSourceRequestState、DataResult、进程、状态、GroupDescriptor
}来自“@progress/kendo数据查询”；
...
导出类ExampleComponent实现OnInit、OnDestroy{
//订阅（我们将在Ngondestory取消订阅）
订阅：订阅=新订阅（）；
//网格数据
项目：GridDataResult；
//剑道网格初始数据源请求状态
defaultDataSourceRequestState=
{skip:0，take:20，group:[]，sort:[]}作为DataSourceRequestState；
//剑道网格状态行为主题
国家主体=
新行为主体(
this.defaultDataSourceRequestState
);
...
构造函数（…）{
//剑道网格数据状态更改事件延迟200毫秒
此文件为.subscriptions.add(
这是国家主题
.debounceTime（200）
。订阅（s=>
this.dataStateChangeCompleted（this.stateSubject.getValue（））
)
);
}
恩贡德斯特罗（）{
此为.subscriptions.unsubscribe（）；
}
dataStateChange（stateChange:DataStateChangeEvent）{
//设置行为主体的新状态
this.stateSubject.next（stateChange）；
}
dataStateChangeCompleted（状态更改：DataSourceRequestState）{
//待办事项：在这里，我们可以执行服务器调用或任何其他操作
//一旦最后一个电网状态的延迟结束
这个.getItems（stateChange）；
}
...
}

.html模板：

---

...

我希望这有帮助：）

问候。

H3llo Sam

在等待剑道的团队加入这样的功能一段时间后，我最终决定采用以下方法：

• 我们可以使用BehaviorSubject来保存剑道网格“DataStateChangeEvent”，还可以包含一个时间延迟。通过这种方式，我们放弃了在一定时间内执行的每个网格状态更改（及其服务器调用）

.ts组件：

---

。。。
进口{
组件、触发器、状态、动画、过渡、样式、OnInit、OnDestroy
}从“@angular/core”开始；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/fromEvent”；
导入'rxjs/add/operator/debounceTime'；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'rxjs/Subscription'导入{Subscription}；
进口{
GridComponent、GridDataResult、DataStateChangeEvent
}来自“@progress/kendo角度网格”；
进口{
DataSourceRequestState、DataResult、进程、状态、GroupDescriptor
}来自“@progress/kendo数据查询”；
...
导出类ExampleComponent实现OnInit、OnDestroy{
//订阅（我们将在Ngondestory取消订阅）
订阅：订阅=新订阅（）；
//网格数据
项目：GridDataResult；
//剑道网格初始数据源请求状态
defaultDataSourceRequestState=
{skip:0，take:20，group:[]，sort:[]}作为DataSourceRequestState；
//剑道网格状态行为主题
国家主体=
新行为主体(
this.defaultDataSourceRequestState
);
...
构造函数（…）{
//剑道网格数据状态更改事件延迟200毫秒
此文件为.subscriptions.add(
这是国家主题
.debounceTime（200）
。订阅（s=>
this.dataStateChangeCompleted（this.stateSubject.getValue（））
)
);
}
恩贡德斯特罗（）{
此为.subscriptions.unsubscribe（）；
}
dataStateChange（stateChange:DataStateChangeEvent）{
//设置行为主体的新状态
this.stateSubject.next（stateChange）；
}
dataStateChangeCompleted（状态更改：DataSourceRequestState）{
//待办事项：在这里，我们可以执行服务器调用或任何其他操作
//一旦最后一个电网状态的延迟结束
这个.getItems（stateChange）；
}
...
}

.html模板：

---

...

我希望这有帮助：）

---

问候。

这很好，使用行为是个好主意。但这将适用于所有过滤器。我想知道这是否可以在每个筛选器的基础上应用。DataStateChangeEvent对象包含一个带有应用筛选器的数组。我认为在触发dataStateChange（）事件后，可以通过将Behavior Subject与filters组或任何其他自定义项一起使用来对其应用类似的方法。这很好，最好使用Behavior。但这将适用于所有过滤器。我想知道这是否可以在每个筛选器的基础上应用。DataStateChangeEvent对象包含一个带有应用筛选器的数组。我认为，一旦触发dataStateChange（）事件，就可以通过将BehaviorSubject与filters组或任何其他自定义项一起使用来对它们应用类似的方法。

...

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

...

}

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