Clear values from angular kendo grid filter input fields

[sjsusce]

I'm submitting a...

• Documentation issue or request

Current behavior

Are there documentations that help explain how to retrieve and clear the Angular Kendo Grid Filter Columns from an external button?

The template contains an external button to clear the Filtered Status field.

< button type="button" class="btn" (click)="clearfilter()" >Clear Filter< /button >

 < kendo-grid 
        [data]="gridData" 
        [pageSize]="state.take"
        [skip]="state.skip"
        [sort]="state.sort"
        [filter]="state.filter"
        [sortable]="true"
        [pageable]="false"
        [scrollable]="true"
        [filterable]="true"
        (dataStateChange)="dataStateChange($event)" >
        < kendo-grid-column field="Status"  title="Status" width="105" >
< /kendo-grid >

The Component creates the Filtered array with Status Field "Active". The clearfilter() is able to clear all filters and display the original array, however, the Status field still display "Active"

export class ApplicationsComponent implements OnInit {
  public ViewManagerArray: Array<any> = this.getRecordList();
  public filter_status: string = "";

  public state: State = {
    skip: 0,
    take: 6,
    filter: {
      logic: "and",
      filters: [
        { field: "Status", operator: "contains", value: this.getStatusItem() }
      ]
    }
  };

  public clear_state: State = {
    skip: 0,
    take: 6,
    filter: {
      logic: "and",
      filters: [
        { field: "Status", operator: "contains", value: "" }
      ]
    }
  }

  private gridData: GridDataResult = process(this.ViewManagerArray, this.state);

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

  constructor(meta: Meta, title: Title) {
    title.setTitle('Applications');
  }

  ngOnInit() { 
    this.getRecordList();
  }

  private getRecordList(): Array<any>{
    return [
      { "ID": 123, "Status":"Draft" },
      { "ID": 456, "Status":"Review" }
    ];
  }

  private getStatusItem(): string{
    this.filter_status = "Active";
    return this.filter_status;
  }

  public clearfilter(){
    this.gridData = process(this.ViewManagerArray, this.clear_state);
  }
}

Expected behavior

The clearfilter() should be able to clear the "Active" value in the Status field.

Minimal reproduction of the problem with instructions

What is the motivation or use case for changing the behavior?

Environment

Package versions:

a@0.0.0 C:\webroot\appmanager
+-- @angular/animations@4.1.3
+-- @angular/cli@1.1.1
+-- @angular/common@4.1.3
+-- @angular/compiler@4.1.3
+-- @angular/compiler-cli@4.1.3
+-- @angular/core@4.1.3
+-- @angular/forms@4.1.3
+-- @angular/http@4.1.3
+-- @angular/platform-browser@4.1.3
+-- @angular/platform-browser-dynamic@4.1.3
+-- UNMET PEER DEPENDENCY @angular/platform-server@^4.0.0
+-- @angular/router@4.1.3
+-- @ngx-universal/state-transfer@0.4.0-beta.1
+-- @progress/kendo-angular-dateinputs@1.0.5
+-- @progress/kendo-angular-dialog@1.1.0
+-- @progress/kendo-angular-dropdowns@1.1.2
+-- @progress/kendo-angular-excel-export@1.0.3
+-- @progress/kendo-angular-grid@1.2.3
+-- @progress/kendo-angular-inputs@1.0.7
+-- @progress/kendo-angular-intl@1.2.1
+-- @progress/kendo-angular-l10n@1.0.2
+-- @progress/kendo-angular-upload@1.1.1
+-- @progress/kendo-data-query@1.0.5
+-- @progress/kendo-drawing@1.1.2
+-- @progress/kendo-theme-default@2.38.2
+-- @types/jasmine@2.5.45
+-- @types/node@6.0.78
+-- angular-2-local-storage@1.0.1
+-- babel-polyfill@6.26.0
+-- bootstrap@3.3.7
+-- codelyzer@3.0.1
+-- core-js@2.4.1
+-- font-awesome@4.7.0
+-- husky@0.14.3
+-- jasmine-core@2.6.3
+-- jasmine-spec-reporter@4.1.0
+-- json-loader@0.5.4
+-- karma@1.7.0
+-- karma-chrome-launcher@2.1.1
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.0
+-- karma-jasmine@1.1.0
+-- karma-jasmine-html-reporter@0.2.2
+-- ngx-bootstrap@1.7.1
+-- oidc-client@1.3.0
+-- protractor@5.1.2
+-- rxjs@5.4.0
+-- sass-lint@1.10.2
+-- sass-loader@6.0.5
+-- source-map-loader@0.2.1
+-- ts-node@3.0.6
+-- tslint@5.3.2
`-- zone.js@0.8.12

Browser:

Version 60.0.3112.113 (Official Build) (64-bit)

System:

• TypeScript version: 2.2
• Node version: v8.4.0
• NPM version: 5.3.0
• Platform: Windows cls

[rkonstantinov]

If I understand correctly, the issue which you are facing is that the filter UI is not cleared. This is due to not resetting the Grid's filter state. The clearfilter is only modifying the data, but the filter, skip, sort, pageSize options are still bound to the original state object.

You should do something similar to the following:

public clearfilter(){
    this.state = this.clear_state;
    this.gridData = process(this.ViewManagerArray, this.clear_state);
}