how to add delay on Kendo grid filters

Question

I'm using the Kendo grid component for Angular 2. I've noticed that whenever I type in a filter (inside the column headers) it triggers a stateChanged event. But I'm making a call to the server so how can I add some sort of delay in order to avoid making a call to the server on each key stroke ?

Answer 1

H3llo Sam,

After waiting some time for Kendo´s team to include such feature, I finally decided to go with the following approach:

• We can use a BehaviorSubject in order to both save the Kendo Grid 'DataStateChangeEvent' and also include a time delay. This way we discard every grid´s state change (and its server call) performed with a certain lapse of time.

.ts component:

---

...

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

---

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

I hope this helps :)

Regards.