PickList (Angular)link

PickList component properties and events.

PickList Propertieslink

Name	Type	Default	Description
Name	string	'picklist' + index suffix	Unique name of the PickList.
Source	array	null	PickList source array.
Target	array	null	PickList target array.
SourceHeader	string	null	PickList source header text.
TargetHeader	string	null	PickList target header text.
SourceFilterPlaceholder	string	null	PickList source filter placeholder.
TargetFilterPlaceholder	string	null	PickList target filter placeholder.
filterBy	string	null	PickList filter by property name.
showSourceFilter	boolean	true	Is source list filter allowed.
showTargetFilter	boolean	true	Is target list filter allowed.
dragdrop	boolean	false	Is drag drop allowed.
showSourceControls	boolean	true	Is source list controls visible.
showTargetControls	boolean	true	Is target list controls visible.
Visible	boolean/expression	true	Is PickList visible.
Disabled	boolean/expression	true	Is PickList disabled.
defaultItemText	string	Template for index	PickList default item text when no template.
Template	string	null	PickList template.

PickList Eventslink

Name	Type	Default	Description
moveToTarget	event	null	Raised when item(s) moved to target.
moveToSource	event	null	Raised when item(s) moved to source.
moveAllToTarget	event	null	Raised when all items moved to target.
moveAllToSource	event	null	Raised when all items moved to source.
sourceReorder	event	null	Raised on source items reorder.
targetReorder	event	null	Raised on target items reorder.
sourceSelect	event	null	Raised on source items selected.
targetSelect	event	null	Raised on target items selected.

Customizing the PickList templatelink

By default the PickList component displays the index of the current row as template. Use the Template property to customize the appearance. The whole data item is available as data in the expression.

Template example:

<strong>${data?.FirstName}</strong> - display the FirstName property in a <strong></strong> element.
Full Name: ${data?.FirstName} ${data?.LastName} - display two data item properties in the row.

Angular declarationlink

<rz-picklist #picklist0 defaultItemText="Template for index" filterBy="ProductName" [source]="getProductsResult" [target]="targetProducts">
  <ng-template let-data picklistTemplate>
  {{data?.ProductName}}
  </ng-template>
</rz-picklist>