How to add "Select All" selection for Igx ComboBox

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

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:

Select All

 

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

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

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.