clearFiltering() does not clear inputs defined in #filterTemplate

[Katona David]

Dear Syncfusion Team!

I have a grid, in which I added a clear filter button to the toolbar, and also added a few input filters in ng-template like this

<ng-template #filterTemplate let-data>

<ejs-textbox [showClearButton]="true" [(ngModel)]="data[data.column.field]" autoComplete="off"

cssClass="e-input" (keyup)="onFilterKeyUp($event, data)" (blur)="onFilterBlur($event, data)">ejs-textbox>

ng-template>

I need to implement filter inputs like this because applying filters on "tabbing" is not on option (only OnEnter and Immediate)

But when I execute

this.grid.clearFiltering();

All the inputs remain the same, the filter texts don't get cleared.

I also noticed that if I log the grid.filterModule, the values stored in it don't get cleared

What can I do about this issue?

Thank you

David

[Pavithra Subramaniyam]

Hi Katona, 

Thanks for contacting Syncfusion support. 

Since the filter template element will be a customized one, we could not trace the exact input element while clearing the filter for that column. So, we need to clear the input element while calling the clearFiltering method as given below. Please refer to the below code example and sample link for more information. 

<ng-template #filterTemplate let-data> 

          <ejs-textbox    #textbox  [showClearButton]="true"  [(ngModel)]="data[data.column.field]" 

            autoComplete="off"   cssClass="e-input"  (blur)="onFilterBlur($event, data)" ></ejs-textbox> 

</ng-template> 

  @ViewChild('textbox') public textBox: TextBoxComponent; 

click(args) { 

    this.textBox.value = ''; 

    this.grid.clearFiltering(); 

  } 

 

Sample: https://stackblitz.com/edit/angular-pb82zv?file=app.component.ts 

Please get back to us if you need further assistance on this. 

Regards, 

Pavithra S