Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

PickList (Angular)

PickList component properties and events.

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>

Step by step

Source Code

1. Create new application with .NET server-side project and add new MSSQL data-source connected to Northwind database.

2. Start Create New Page wizard and select Empty Page template.

3. Drop PickList component and bind it to Categories table.

4. Create new array Page property selectedCategories in Page Load event and use it for PickList Target.

5. Use CategoryName for PickList Template and FitlerBy.

6. Define PickList SourceHeader, TargetHeader, SourceFilterPlaceHolder and TargetFilterPlaceHolder.

3. Run the application and pick categories.