Multi Select with grouping option

UI Components for Angular
Post Reply
tombostone
Posts: 1
Joined: 23 Oct 2019, 15:29

23 Oct 2019, 15:40

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
Posts: 398
Joined: 08 Aug 2018, 14:09

01 Nov 2019, 10:14

tombostone wrote:
23 Oct 2019, 15:40
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
Posts: 1
Joined: 19 Apr 2020, 13:33

19 Apr 2020, 13:36

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests