How to clear data on kendo ui angular 2 grid

Question

I'm looking for a way to clear the Kendo UI Grid for Angular 2 if the user navigates another page or simply logout. I have tried clearing the observable to null and it is not good and i couldn't fill data after all. Can anyone suggest me a better way?

Answer 1

I've adapted @knikolov's answer to suit my purposes. Since I use an object to store grid settings, .next([]) was giving me type warnings, so replacing it with .next(null) works.

Also, it helps to set the grid's skip property to 0 to reset the paging as well, in case the user was no longer on the first page of results.

gridReset(): void {
    this.dataService.next(null); // clears grid data
    this.gridSettings.Skip = 0; // resets paging
    // ...
}

given the grid:

<kendo-grid name="theGrid" 
            [data]="gridSettings.GridData | async"
            [skip]="gridSettings.Skip"
            [pageSize]="gridSettings.PageSize">

and declaring the settings object variable:

public gridSettings: GridSettings = {
    Skip: 0,
    PageSize: 10,
    GridData: this.dataService
};

Answer 2

You can set the view to empty array using either =Observable.empty() or =Observable.from([]) but you will need to rebind the service back again if you want to fetch data. This is why the easiest way will be to just call .next([]) and then when needed fetch the data. See this example