About Kendo UI Angular grid clear filter is not working

[Ivaylo]

Hello , I have issue about one grid with filters sets. Filters works perfect, but not shows clear filter button which is on example you have.

<kendo-grid [data]="gridData" [height]="950" [pageSize]="gridState.take" [skip]="gridState.skip"
                        [sort]="gridState.sort" [pageable]="true" [sortable]="true"
                        (dataStateChange)="dataStateChange($event)" (edit)="editHandler($event)"
                        (remove)="removeHandler($event)" (add)="addHandler($event)" [filterable]="true">
                        <ng-template kendoGridToolbarTemplate>
                            <button kendoGridAddCommand>+ Add Exception</button>
                        </ng-template>
                        <kendo-grid-column field="PROJECT_ID" title="Project Id" width="200" [filterable]="false">
                        </kendo-grid-column>
                        <kendo-grid-column field="TRANCHE_NBR" title="Tranche Nbr" width="150" [filterable]="false">
                        </kendo-grid-column>
                        <kendo-grid-column field="OBLIGATION_NBR" title="Obligaton Nbr" width="200" filter="numeric">
                        </kendo-grid-column>
                        <kendo-grid-column field="FIXING_GAP" title="FX GAP" width="100" [filterable]="false">
                        </kendo-grid-column>
                        <kendo-grid-column field="SUMMIT_CALENDAR" title="Summit Calendar" width="250"
                            [filterable]="false">
                        </kendo-grid-column>
                        <kendo-grid-command-column title="command" width="220">
                            <ng-template kendoGridCellTemplate>
                                <button kendoGridEditCommand [primary]="true">Edit</button>
                                <button kendoGridRemoveCommand>Delete</button>
                            </ng-template>
                        </kendo-grid-command-column>
                    </kendo-grid>

 

public filter: CompositeFilterDescriptor;
  public gridState: State = {
    sort: [],
    skip: 0,
    take: 20,
    // Initial filter descriptor
    filter: {
      logic: 'and',
      filters: []
    }
  }
  userInfo: any;
  public gridData: GridDataResult;

 

public ngOnInit(): void {
    this.storeData = [];
    this.items = [];
    this.userInfo = this.securityService.getFromLocal('user');
    this.userId = this.userInfo.Email.split('@')[0];
    if (this.userInfo != null && this.userInfo.isValidUser) {
      this.loadGrid();
    }
    this.showpage = true;
  }

  loadGrid() {
    this.loan_service.GetAllLoans().subscribe(x => {
      this.gridData = process(x, this.gridState);
    });
  }
  public dataStateChange(state: DataStateChangeEvent): void {
    debugger;
    this.gridState = state;
    this.loan_service.GetAllLoans().subscribe(x => {
      this.gridData = process(x, this.gridState);
    });
  }

 

 

Please advice 

Thank you 

 

[Dimiter Topalov]

Hello Ivaylo,

The Grid filter input needs to be bound to the currently applied filter object (in the provided code snippet, this would be the gridState.filter object), similar to the [sort] binding. This ensures that the Grid will correctly represent the current filtering configuration:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/#toc-getting-started // point 3

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ivaylo]

Thank you Dimiter Topalov for your explanation. This works for me now

 

Best Regards