How to clear all datagrid filters programmatically?

问题

I'd like to have a button that the user can click to clear all the filters. I haven't found a way to do so yet. Any hints? I have a mix of default and custom column filters

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
  <clr-dg-column [clrDgField]="'healthScore'" class="healthScoreWidth">
  Health
  <clr-dg-filter [clrDgFilter]="refHealthScoreFilter">
      <app-filter-checkbox #refHealthScoreFilter [items]="healthScoreItems" [filter]="healthScoreFilter">
      </app-filter-checkbox>
  </clr-dg-filter>
</clr-dg-column>
<clr-dg-column [clrDgField]="'name'">System</clr-dg-column>
<clr-dg-column [clrDgField]="'serialNumber'">Serial Number</clr-dg-column>
...
</clr-datagrid>

回答1:

We are currently working on https://github.com/vmware/clarity/issues/2094, which will provide a simple way to set the entire state of the Datagrid to whatever you need.

In the meantime, you'd have to clear the filters individually. How you do this depends on what kind of filters you use, whether your datagrid columns are dynamic and generated by an *ngFor or not, whether you provided custom filters, ...

Here is an example showing how to do it at the moment if you're using default filters: https://stackblitz.com/edit/clarity-datagrid-clear-filters?file=app%2Fapp.component.ts It uses @ViewChildren to get the columns and then sets the public filterValue property on them.

If my example doesn't match your use case, please share your actual code, so we can help you figure out the correct workaround until the issue linked above is closed.

来源：https://stackoverflow.com/questions/49655119/how-to-clear-all-datagrid-filters-programmatically

标签

vmware-clarity