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
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.
