How to reset the kendo grid filters - Kendo Angular 2+

[alex]

I want to reset the filter settings without making the call again. I need to do this because at the change of page I have to set the grid without filters but without call the function again because the data are the same

This is my component:

 
 gridData: GridDataResult;
  state: State = {
    skip: 0,
    take: 25
  };

  clearState: State = {
    skip: 0,
    take: 25
  };

  //DATASOURCE
  products: any[] = [];

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.gridData = process(this.products, this.state);
  }

public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
    this.products = filterBy(this.products, filter);
  }

public clearFilters() {
  this.state = this.clearState;
  this.gridData = process(this.products, this.clearState);
}

public getProducts(){
    this.myService.getData(year).subscribe(data => {
      this.products= data;
      this.gridData = process(data, this.state);
    });
}



                                    

    <kendo-grid
            [data]="gridData"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [filter]="state.filter"
            [sortable]="true"
            [pageable]="true"
            [filterable]="true"
            [selectable]="true"
            [resizable]="true"
            (filterChange)="filterChange($event)"
            (dataStateChange)="dataStateChange($event)">
                    <ng-template ngFor [ngForOf]="columns" let-column>
                        <kendo-grid-column
                            width="{{column.width}}"
                            format="{{column.format}}"
                            filter="{{column.filter}}"
                            field="{{column.value}}"
                            title="{{column.title}}">
                        </kendo-grid-column>
                    </ng-template>
   </kendo-grid>

if I call the clearFilters function the filters are reset but the arrows remain on the previously filtered columns. then the data in the table returns as originally but the css part of the table remains filtered (attached img)

 

 

[Yanmario]

Hi Alex,

Thank you for the provided code snippet and screenshot.

To remove the sort arrow from the UI when clearing the filters could be achieved by adding the sort descriptor in the State data operations and reset it together with the filters as demonstrated in the following code and demo:

<kendo-grid
      [data]="query | async"
      [loading]="loading"
      [skip]="state.skip"
      [pageSize]="state.take"
      scrollable="virtual"
      [rowHeight]="36"
      [height]="450"
      [sortable]="true"
      [sort]="state.sort"
      [filterable]="true"
      [filter]="state.filter"
      (dataStateChange)="onChange($event)"
    >

public state: State = {
    skip: 0,
    take: 100,
    sort: [],
    filter: {
      logic: "and",
      filters: []
    }
  };

 onClick() {
    this.state.filter = {
      logic: "and",
      filters: []
    };
    this.state.sort = [];
  }

StackBlitz example:

https://stackblitz.com/edit/angular-568xzq-bfk3bw

I hope this helps.

Regards,
Yan
Progress Telerik