How to add "Select All" selection for Igx ComboBox

State See Verified Answer
Replies 3 replies
Subscribers 7 subscribers
Views 3015609 views
Users 0 members are here

Afif Halim posted over 2 years ago

Hi,

Is there a way to add the "Select All" button to the IgxCombo selection?

For example, adding below of the search input:

Any help will be highly appreciated.

Thanks.

Regards,

Afif

Top Replies

640

Offline Viktor Kombov posted over 2 years ago +1 verified
Hello Afif, Thank you for posting in our community. What I can suggest for achieving your requirement is using the Header template of igxCombo where...view reply »
90

Offline Afif Halim posted over 2 years ago in reply to Viktor Kombov +1
Hi Viktor, Thanks for your wonderful solution, I'm able to implement the changes successfully. However, one note from my end, I'm using this.combo...view reply »

640

Offline Viktor Kombov posted over 2 years ago in reply to Afif Halim

Hello Afif,

I am glad that you find this suggestion helpful!

Thank you for choosing Infragistics components!

Regards
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.
Cancel
Reply

Cancel
90

Offline Afif Halim posted over 2 years ago in reply to Viktor Kombov

Hi Viktor,

Thanks for your wonderful solution, I'm able to implement the changes successfully.

However, one note from my end, I'm using this.combo.selectedItems() instead of this.combo.selection to make it works, probably because I'm using the older version (v11).

Thanks!

Regards,
Afif
Cancel
Reply

Cancel

640

Verified Answer

Offline Viktor Kombov posted over 2 years ago

Hello Afif,

Thank you for posting in our community.

What I can suggest for achieving your requirement is using the Header template of igxCombo where you can add your custom content:

HTML:

<igx-combo #combo [data]="data">
  <ng-template igxComboHeader>
    <div class="select-all-button-wrapper">
      <igx-checkbox (click)="onSelectAllClick()" [checked]="combo.data?.length === combo.selection?.length"
        [indeterminate]="combo.selection?.length > 0 && combo.selection?.length !== combo.data?.length">Select All
      </igx-checkbox>
    </div>
  </ng-template>
</igx-combo>

TYPESCRIPT:

export class ComboSelectAllButtonComponent { 
  @ViewChild('combo') public combo!: IgxComboComponent;

  public onSelectAllClick() {
    if (this.combo.selection.length === this.combo.data?.length) {
      this.combo.deselectAllItems();
    } else {
      this.combo.selectAllItems();
    }
  }
}

Attached you will find a small sample where is demonstrated how the suggested approach is working.

Please test the sample on your side and let me know whether you find it helpful.

Looking forward to hearing from you.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

IgxComboSelectAllCheckBox.zip