PickList

This guide demonstrates how to use the PickList component.

PickList Properties

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 Events

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 template

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 declaration

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

Get Radzen

Sign-up to download the free 30-day Radzen trial.