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:
<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 KombovEntry Level Software DeveloperInfragistics, 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
I am glad that you find this suggestion helpful!
Thank you for choosing Infragistics components!
RegardsViktor KombovEntry Level Software DeveloperInfragistics, Inc.