Multi Select with grouping option

[tombostone]

The Basic Multi Select drop down is perfect for my requirement except that it misses the Grouping option (like in Group Dropdown). Please suggest if there is a way to implement the Basic Multi Select drop down with grouping option. It will be a life saver for me.

Code: Select all

 {
                label: 'Germany', 
                items: [
                    {label: 'Audi', value: 'Audi'},
                    {label: 'BMW', value: 'BMW'},
                    {label: 'Mercedes', value: 'Mercedes'}
                ]
            },
            {
                label: 'USA', 
                items: [
                    {label: 'Cadillac', value: 'Cadillac'},
                    {label: 'Ford', value: 'Ford'},
                    {label: 'GMC', value: 'GMC'}
                ]
            },
            {
                label: 'Japan', 
                items: [
                    {label: 'Honda', value: 'Honda'},
                    {label: 'Mazda', value: 'Mazda'},
                    {label: 'Toyota', value: 'Toyota'}
                ]
            }
        ]; 

//with p-dropdown work as i want cause i use the option [group]= true

<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar" placeholder="Select a Car" [group]="true"></p-dropdown>;

//but with p-multiSelect the option [group] doesn't exist :

<p-multiSelect [options]="groupedCars" [(ngModel)]="selectedCar" optionLabel="label"></p-multiSelect>;
html

[yigitfindikli]

The Basic Multi Select drop down is perfect for my requirement except that it misses the Grouping option (like in Group Dropdown). Please suggest if there is a way to implement the Basic Multi Select drop down with grouping option. It will be a life saver for me.

Code: Select all

 {
                label: 'Germany', 
                items: [
                    {label: 'Audi', value: 'Audi'},
                    {label: 'BMW', value: 'BMW'},
                    {label: 'Mercedes', value: 'Mercedes'}
                ]
            },
            {
                label: 'USA', 
                items: [
                    {label: 'Cadillac', value: 'Cadillac'},
                    {label: 'Ford', value: 'Ford'},
                    {label: 'GMC', value: 'GMC'}
                ]
            },
            {
                label: 'Japan', 
                items: [
                    {label: 'Honda', value: 'Honda'},
                    {label: 'Mazda', value: 'Mazda'},
                    {label: 'Toyota', value: 'Toyota'}
                ]
            }
        ]; 

//with p-dropdown work as i want cause i use the option [group]= true

<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar" placeholder="Select a Car" [group]="true"></p-dropdown>;

//but with p-multiSelect the option [group] doesn't exist :

<p-multiSelect [options]="groupedCars" [(ngModel)]="selectedCar" optionLabel="label"></p-multiSelect>;
html

Hi,
You need to use <ng-template let-group pTemplate=">, there is stackblitz example for you https://stackblitz.com/edit/github-hvwttd .

[100rabh]

I created a wrapper on top of p-multiSelect to support this functionality. Have a look here: https://medium.com/@saurabhatgate/group ... 3616df9981