From 250dab6f75ed4f333afd95c4f1d7b992eede5255 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= Date: Mon, 18 Jan 2021 12:01:11 +0300 Subject: [PATCH] #9772 Doc for MultiSelect --- .../multiselect/multiselectdemo.html | 80 ++++++++++++++++++- .../components/multiselect/multiselectdemo.ts | 35 ++++++++ 2 files changed, 112 insertions(+), 3 deletions(-) diff --git a/src/app/showcase/components/multiselect/multiselectdemo.html b/src/app/showcase/components/multiselect/multiselectdemo.html index 4f4c0849dc6..1bbb81de9b6 100755 --- a/src/app/showcase/components/multiselect/multiselectdemo.html +++ b/src/app/showcase/components/multiselect/multiselectdemo.html @@ -32,6 +32,16 @@
Templating
+ +
Grouped
+ + +
+ + {{group.label}} +
+
+
Virtual Scroll (10000 Items)
@@ -164,7 +174,8 @@
Model Driven Forms
Custom Content

For custom content support when displaying options, define a ng-template named item where the local ng-template variable refers to an option in the options collection. - Similarly selectedItems template can be used to customize when displaying the selected options. Additionally a custom header and footer can be provided using header and footer templates.

+ Similarly selectedItems template can be used to customize when displaying the selected options. Additionally a custom header and footer can be provided using header and footer templates. + In addition when grouping is enabled, group template is available to customize the option groups. All templates get the option instance as the default local template variable.

<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom"> @@ -410,6 +421,24 @@
Properties
disabled Name of the disabled field of an option. + + optionGroupLabel + string + label + Name of the label field of an option group. + + + optionGroupChildren + string + items + Name of the options field of an option group. + + + group + boolean + false + Whether to display options as grouped when nested options are provided. + overlayVisible boolean @@ -664,6 +693,16 @@
Dependencies
</ng-template> </p-multiSelect> +<h5>Grouped</h5> +<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities3" defaultLabel="Select a City" crollHeight="250px" display="chip"> + <ng-template let-group pTemplate="group"> + <div class="p-d-flex p-ai-center"> + <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/> + <span>{{group.label}}</span> + </div> + </ng-template> +</p-multiSelect> + <h5>Virtual Scroll (10000 Items)</h5> <p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll"> <ng-template let-country pTemplate="item"> @@ -698,13 +737,17 @@
Dependencies
selectedCities1: City[]; selectedCities2: City[]; - + + selectedCities3: any[]; + selectedCountries1: Country[]; selectedCountries2: Country[]; cities: City[]; + groupedCities: SelectItemGroup[]; + countries: City[]; virtualCountries: Country[]; @@ -731,10 +774,41 @@
Dependencies
{name: 'United States', code: 'US'} ]; - this.countryService.getCountries().then(countries => { + this.groupedCities = [ + { + label: 'Germany', value: 'de', + items: [ + {label: 'Berlin', value: 'Berlin'}, + {label: 'Frankfurt', value: 'Frankfurt'}, + {label: 'Hamburg', value: 'Hamburg'}, + {label: 'Munich', value: 'Munich'} + ] + }, + { + label: 'USA', value: 'us', + items: [ + {name: 'Chicago', value: 'Chicago'}, + {name: 'Los Angeles', value: 'Los Angeles'}, + {name: 'New York', value: 'New York'}, + {name: 'San Francisco', value: 'San Francisco'} + ] + }, + { + label: 'Japan', value: 'jp', + items: [ + {name: 'Kyoto', value: 'Kyoto'}, + {name: 'Osaka', value: 'Osaka'}, + {name: 'Tokyo', value: 'Tokyo'}, + {name: 'Yokohama', value: 'Yokohama'} + ] + } + ]; + + this.countryService.getCountries().then(countries => { this.virtualCountries = countries; }); } + }
diff --git a/src/app/showcase/components/multiselect/multiselectdemo.ts b/src/app/showcase/components/multiselect/multiselectdemo.ts index e2eaec8b426..a4a4c16aa54 100755 --- a/src/app/showcase/components/multiselect/multiselectdemo.ts +++ b/src/app/showcase/components/multiselect/multiselectdemo.ts @@ -1,5 +1,6 @@ import {Component} from '@angular/core'; import {CountryService} from '../../service/countryservice'; +import {SelectItemGroup} from 'primeng/api'; interface City { name: string, @@ -20,6 +21,8 @@ export class MultiSelectDemo { selectedCities1: City[]; selectedCities2: City[]; + + selectedCities3: any[]; selectedCountries1: Country[]; @@ -27,6 +30,8 @@ export class MultiSelectDemo { cities: City[]; + groupedCities: SelectItemGroup[]; + countries: City[]; virtualCountries: Country[]; @@ -53,6 +58,36 @@ export class MultiSelectDemo { {name: 'United States', code: 'US'} ]; + this.groupedCities = [ + { + label: 'Germany', value: 'de', + items: [ + {label: 'Berlin', value: 'Berlin'}, + {label: 'Frankfurt', value: 'Frankfurt'}, + {label: 'Hamburg', value: 'Hamburg'}, + {label: 'Munich', value: 'Munich'} + ] + }, + { + label: 'USA', value: 'us', + items: [ + {label: 'Chicago', value: 'Chicago'}, + {label: 'Los Angeles', value: 'Los Angeles'}, + {label: 'New York', value: 'New York'}, + {label: 'San Francisco', value: 'San Francisco'} + ] + }, + { + label: 'Japan', value: 'jp', + items: [ + {label: 'Kyoto', value: 'Kyoto'}, + {label: 'Osaka', value: 'Osaka'}, + {label: 'Tokyo', value: 'Tokyo'}, + {label: 'Yokohama', value: 'Yokohama'} + ] + } + ]; + this.countryService.getCountries().then(countries => { this.virtualCountries = countries; });