Is it possibile select one element at time in pick list prime ng

user_6509514 0
Viewed 506

I need to do my pick list one selected. The default behavior is when the user click on more items (source panel) it selects all and pass them in the target panel. I want the when the user click on source items it can selected only one item. This is my html code:

p-pickList [responsive]="true" sourceHeader="Prov" targetHeader="Ass" [source]="list1" [target]="lis2" [metaKeySelection]="false" >

I don't know what property I need to use. Anyone can help me?

primeng angular picklist
2 Answers

If someone need an answer I've just found a simple way to do unique selection with PrimeNG PickList.

HTML:

<p-pickList
    [metaKeySelection]="false"
    (onSourceSelect)="onElementSelect($event)"
>
    <ng-template let-element Template="item">
        <span>
            {{ element }}
        </span>
    </ng-template>
</p-pickList>

Typescript :

// Make the PickList not multiple
public onElementSelect(event): void {
    if (event.items.length > 1) {
        event.items.splice(0, event.items.length - 1);
    }
}
user_133723120

You can use this code.

 <p-pickList #listPickerCtrl                   
   (onSourceSelect)="onSourceSelect($event)"
   (onTargetSelect)="onTargetSelect($event)">
 </p-pickList>

import { PickList } from 'primeng/picklist';

@ViewChild('listPickerCtrl') listPickerCtrl: PickList;

onSourceSelect(args: any) {
    // Disable multiple selection
    if (args.items.length > 1) {
      const lastItemIndex = args.items.length - 1;
      if (lastItemIndex > -1) {
        this.listPickerCtrl.selectedItemsSource.splice(lastItemIndex, 1);
      }
    }
  }

 onTargetSelect(args: any) {
    // Disable multiple selection
    if (args.items.length > 1) {
      const lastItemIndex = args.items.length - 1;
      if (lastItemIndex > -1) {
        this.listPickerCtrl.selectedItemsTarget.splice(lastItemIndex, 1);
      }
    }
  }
user_18264690
Related