Verwendung
Die Picklist ist ein Dialog. Die zur Auswahl stehenden Elemente werden in einer Liste auf der linken Seite angezeigt, die ausgewählten
Elemente werden auf der rechten Seite angezeigt.
Der Einsatz
der Picklist wird erst bei einer Auswahlmöglichkeit von mindestens 12 Elementen empfohlen. Bei weniger
Auswahlmöglichkeiten bieten sich
Checkboxes
an.
- Durch einfaches Anklicken der Items können die gewünschten Elemente hinzugefügt oder entfernt werden.
- Unterhalb der Liste befinden sich Funktionen, um entweder alle Items auf einmal auszuwählen oder die Auswahl aufzuheben.
- Das Ergebnis der Auswahl wird in der Regel in einer Table oder List aufgeführt.
- Ausgewählte Items erscheinen nicht mehr in "Available Options", sondern in "Selected Options"
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
availableOptions | IHyperSelectItem[] | undefined | Available Options |
selectedOptions | IHyperSelectItem[] | undefined | Selected Options |
selectedOptionsFilter | (option: IHyperSelectItem, searchTerm: string ) => {} | availableOptionsFilter | Function to filter the options for |
availableItemsValue | undefined | "" | |
selectedItemsValue | undefined | "" | |
disabled | undefined | false | |
availableItemsText | string | undefined | Available Options Headline |
selectedItemsText | string | undefined | Selected Options Headline |
Events
| Name | Description |
|---|---|
change | fires if selectedOptions changes |
change | fires if selectedOptions changes |
change | fires if selectedOptions changes |
change | fires if selectedOptions changes |
Weitere dazugehörige Komponenten
PicklistDialog
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
availableOptions | IHyperSelectDropdown[] | undefined | all available options |
selectedOptions | IHyperSelectDropdown[] | undefined | all selected options |
availableItemsText | string | "" | label for the available items |
selectedItemsText | string | "" | label for the selected items |
label | string | undefined | title of this dialog |
isVisible | boolean | false | show/hide the dialog |
isSaveBtnDisabled | boolean | false | is save button disabled (e.g. invalid form) |
isEmptyValid | boolean | true | Allow selection to be empty |
min | number | undefined | undefined | minimum amount of required selected items |
max | number | undefined | undefined | maximum amount of required selected items |
availableOptionsFilter | (option: IHyperSelectItem, searchTerm: string ) => {} | undefined | Function to filter the options for |
Events
| Name | Description |
|---|---|
apply | |
close | |
close |