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

1 Answer 1845 Views
Data Query Editor General Discussions Grid
alex
Top achievements
Rank 1
Iron
Veteran
alex asked on 23 Jun 2021, 10:44 AM | edited on 23 Jun 2021, 10:45 AM

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)

 

 

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 25 Jun 2021, 01:29 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Data Query Editor General Discussions Grid
Asked by
alex
Top achievements
Rank 1
Iron
Veteran
Answers by
Yanmario
Telerik team
Share this question
or