PickList PickList is used to reorder items between differents lists.

Import


import {PickListModule} from 'primeng/primeng';

Getting Started

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


<p-pickList [source]="list1" [target]="list2">
    <template let-car>
        <div class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </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">

Attributes

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

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.

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.


<p-pickList [source]="sourceCars" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
    <template let-car>
        <div class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </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 = [];
    }
}