PrimeNG p-orderList disable multiple selection of items

1
votes

I am using PrimeNG's p-orderList. By default, the metaKeySelection attribute is true which implies that a metaKey(ctrl key) is needed to be pressed to select multiple items. I was rather looking for a way to completely disable selection of multiple items. I should be able to select ONLY ONE item in the ordered list. There is no metaKey attribute available for p-orderList. Can anyone help me with this?

<p-orderList [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
  <ng-template let-policy pTemplate="policy">
    <span>{{policy}}</span>
  </ng-template>
</p-orderList>

PS: onSelectionChange($event) is triggered every time you select items from the ordered list. $event.value contains the array of the items.

2
htmlangularprimeng
Please correct your tagging! Read what all tags are and see which one you are actually not using - Kukeltje

2 Answers

1
votes

There is no easy flag for it but it can be achieved through calling a function that basically replaces the entire selection array with just the original selected row. You will need a variable to store the previous value for comparison. 

  onSelectionChange(event) {
    if (event.value.length === 1) {
      this.tempValue = event.value[0];
    }
    else {
      event.value = [this.tempValue];
    } 
  }

Can also be simplified by passing event.value to the function

(onSelectionChange)="onSelectionChange($event.value)">
0
votes

What about the metaKeySelection input property? (as shown here)

<p-orderList [metaKeySelection]="false" [value]="policyList" [listStyle]="{'min-height':'calc(100vh - 325px)'}" (onSelectionChange)="onSelectionChange($event)">
  <ng-template let-policy pTemplate="policy">
    <span>{{policy}}</span>
  </ng-template>
</p-orderList>