Primeng: Multiselect Dropdown with Groups

[karthik-dusk]

I want to achieve multi-select dropdow with groups as shown in the above pic.

[wvpelt]

Hi, did you manage to get this done? I'm looking for the exact same thing

[karthik-dusk]

Sadly Nope :-( No reply from PrimeNG too.

[bossqone]

+1

[vipatel03]

+1

[mperezguendulain]

Here's a component that does that:

https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby

[DesertFoxNV]

One workaround would be to add a disabled item, and use it as a group label. Then use CSS to remove the empty checkbox, and use a custom item template in the multiselect component.

CSS Example
li.ui-state-disabled.ui-multiselect-item > div.ui-chkbox { display: none !important; }

Template Example
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars2" [panelStyle]="{minWidth:'12em'}"> <ng-template let-car pTemplate="item"> <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;display:inline-block;vertical-align:middle"/> <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div> </ng-template> </p-multiSelect>

[adama357]

Duplicate of #2622, except that issue also asks for a checkbox to check / uncheck an entire group (which would be helpful).

[soyiatgit]

I too needed this multiselect with groups. I created a wrapper on top of multiselect. Have a look here.
https://medium.com/@saurabhatgate/grouped-multi-select-with-primeng-113616df9981