CODEWITHSUNDEEP
javascriptangulartypescriptprimeng
sashafedsdev
sashafedsdev

Reputation: 169

PrimeNg multiselect, select all items by default

I have a multiselect item from PrimeNg. I can select them if I need, but is it possible to have them all selected by default?

<p-multiSelect [options]="userconfig" [(ngModel)]="selectedScopes" optionLabel="name"
    maxSelectedLabels=3 (onChange)="getCheckboxScope($event)" 
    selectedItemsLabel="{0} users selected" defaultLabel="select users..."> 
</p-multiSelect>

Upvotes: 7

Views: 28298

Answers (3)

Anand mishra
Anand mishra

Reputation: 211

Use optionValue="id" and make sure to push the id of the object in the array.

Template

<p-multiSelect required  [options]="projects" [(ngModel)]="selectedProjects" name="project" defaultLabel="Project"
  optionLabel="name optionValue="id">
</p-multiSelect>

Upvotes: 1

nonexistent
nonexistent

Reputation: 539

Since PrimeNg's MultiSelect does not inherently come with a property to select all the options by default, you can just fill your selectedScopes with the values from userconfig. Presumably you're initializing selectedScopes as an empty array? If you are, then instead you could do something like this:

selectedScopes = [value1, value2, value3]

Where the values are coming from userconfig. Since you're two-way binding selectedScopes, whatever values are already in selectedScopes should reflect as a selection in your MultiSelect.

(My terminology's still a bit rusty, so if anything's unclear please let me know!)

Upvotes: 0

Rub&#233;n Soler
Rub&#233;n Soler

Reputation: 1187

If you want to have all items selected bind all values of the options ( userconfig ) in the multiselect into ( selectedScopes ) The component autodetect the property selectedScopes is equal to userconfig values and select all items.

Example:

export class MyModel {

    userconfig: SelectItem[];

    selectedScopes: any[];

    constructor() {
        // Options of the multiselect
        this.userconfig = [
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}}
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];
       // Select all items
       selectedScopes = [];
       userconfig.map((item) => selectedScopes.push(item.value));
    }

}

Upvotes: 10

Related Questions