PickList PickList is used to reorder items between differents lists.

{{car.brand}} - {{car.year}} - {{car.color}}

Import


import {PickListModule} from 'primeng/picklist';

Getting Started

PickList requires two arrays as its lists and a ng-template for the item content where each item in the array can be accessed inside the ng-template using a local ng-template variable.


<p-pickList [source]="list1" [target]="list2">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-pickList>


export class MyComponent {

    list1: any[];
    
    list2: any[];
    
    ngOnInit() {
        this.list1 = //initialize list 1
        this.list2 = //initialize list 2
    }
}

Responsive

In responsive mode, picklist adjusts its controls based on screen size. To activate this mode, set responsive as true.


<p-pickList [responsive]="true">

Headers

sourceHeader and targetHeader attributes are used to define captions for the lists.


<p-pickList sourceHeader="Source List" targetHeader="Target List">

Multiple Selection

Multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.

Filtering

Options can be filtered using an input field in the overlay by enabling the filterBy property. This filterBy property decides which field to search(Accepts multiple fields with a comma).


<p-pickList [source]="sourceCars" [target]="targetCars" filterBy="brand"></p-pickList>

DragDrop

Items can be reordered using drag and drop by enabling dragdrop property along with dragdropScope to avoid conflict with other drag drop events on view. This dragdrop property also supports cross list actions.


<p-pickList [source]="sourceCars" [target]="targetCars" dragdrop="true"></p-pickList>

Properties

Name	Type	Default	Description
source	array	null	An array of objects for the source list.
target	array	null	An array of objects for the target list.
sourceHeader	string	null	Text for the source list caption
targetHeader	string	null	Text for the target list caption
filterBy	string	null	When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
showSourceFilter	boolean	true	Whether to show filter input for source list when filterBy is enabled.
targetSourceFilter	boolean	true	Whether to show filter input for target list when filterBy is enabled.
dragdrop	boolean	false	Whether to enable dragdrop based reordering.
dragdropScope	string	null	Unique key of drag drop events to avoid conflict with other drag drop events on the page.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
sourceStyle	string	null	Inline style of the source list element.
targetStyle	string	null	Inline style of the target list element.
responsive	boolean	false	When enabled orderlist adjusts its controls based on screen size.
showSourceControls	boolean	true	Whether to show buttons of source list.
showTargetControls	boolean	true	Whether to show buttons of target list.
metaKeySelection	boolean	true	Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
sourceFilterPlaceholder	string	null	Placeholder text on source filter input.
targetFilterPlaceholder	string	null	Placeholder text on target filter input.
disabled	boolean	false	When present, it specifies that the component should be disabled.

Events

Name	Parameters	Description
onMoveToTarget	event.items: Moved items array	Callback to invoke when items are moved from source to target.
onMoveToSource	event.items: Moved items array	Callback to invoke when items are moved from target to source.
onMoveAllToTarget	event.items: Moved items array	Callback to invoke when all items are moved from source to target.
onMoveAllToSource	event.items: Moved items array	Callback to invoke when all items are moved from target to source.
onSourceReorder	event.items: Moved items array	Callback to invoke when items are reordered within source list.
onTargetReorder	event.items: Moved items array	Callback to invoke when items are reordered within target list.
onSourceSelect	event.originalEvent: Browser event items: Selected items array	Callback to invoke when items are selected within source list.
onTargetSelect	event.originalEvent: Browser event items: Selected items array	Callback to invoke when items are selected within target list.

Methods

Name	Parameters	Description
resetFilter	-	Resets the filters.


<p-pickList #pl [source]="sourceCars" [target]="targetCars" filterBy="brand"></p-pickList>

<button type="button" pButton (click)="pl.resetFilter()" label="Reset"></button>

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-picklist	Container element.
ui-picklist-source-controls	Container of source list buttons.
ui-picklist-target-controls	Container of target list buttons.
ui-picklist-buttons	Container of buttons.
ui-picklist-listwrapper	Parent of a list element.
ui-picklist-list	List element.
ui-picklist-item	An item in the list.

Dependencies

None.

View on GitHub


<p-pickList [source]="sourceCars" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true" filterBy="brand" 
        dragdrop="true" dragdropScope="cars" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-pickList>


export class PickListDemo {

    sourceCars: Car[];
    
    targetCars: Car[];
    
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.sourceCars = cars);
        this.targetCars = [];
    }
}