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;
});