CODEWITHSUNDEEP
angularprimengmulti-select
user749798
user749798

Reputation: 5370

Clear multi-select with a button (angular primeng turbotable)

Is it possible to remotely clear a multi-select (or multiple multi-selects) with a button? I'm using primeng multi-select with turbo table

I've seen this question a few times, but not with a selected answer.

Below is my multi-select:

<span *ngIf="col.field == 'Product'">
  <p-multiSelect [options]="getUniques(col.field)" 
                 (onChange)="dt.filter($event.value, col.field, 'in')">
  </p-multiSelect>
</span>

Here is my button:

<p-button label="Clear All" 
          styleClass="ui-button-primary"
          (click)="onResetAll($event, dt)">
 </p-button>

Here is the method, where I try to reset values, but does not seem to reset:

onResetAll(event, dt) {
    dt.filter('', 'Product', 'contains');
}

Upvotes: 4

Views: 8452

Answers (3)

Dave Amato
Dave Amato

Reputation: 1

To add to the solution above:-

onResetAll(event, dt) {
  this.components['_results'].forEach(ds => {
    ds.value = null;
    ds.updateLabel();
  });
}

If you are using chips then you will need to add:-

ds.cd.detectChanges();

As there is a refresh issue

Upvotes: 0

DLV
DLV

Reputation: 563

Simplest solution will be :

this.form.get("formcontrolname").setValue([]);

Upvotes: 2

phucnh
phucnh

Reputation: 1090

Below for multi multiselect

First set view children selector #cmp

<p-multiSelect #cmp [options]="cars" appendTo="body"
                 (onChange)="table.filter($event.value, 'brand', 'in')">
  </p-multiSelect>

In code behind declare setof components

@ViewChildren('cmp') components: QueryList<MultiSelect>;

And update your button click event

onResetAll(event, dt) {
    this.components['_results'].forEach(ds => {
      ds.value = null;
      ds.updateLabel();
    });
    dt.filter('', 'brand', 'contains');
  }

Demo here

Upvotes: 4

Related Questions