Pick List - Freeze Menu Items at Target as Mandatory

[envistallc]

Hi,
We have a requirement to choose a few options among several. So we have used Pick List.

A few options are mandatory and shouldn't be moved/removed from selected options (target). For now, we have used onMoveToSource and onMoveAllToSource events to add the moved/removed items back to selected/target list. As we are adding the moved/removed items to the selected/target list, the order of the items is messed up (as the order is important for the functionality).

Is there any way to freeze the selected/target items by making items un-selectable or disabling move buttons/drag drops?

The scenario is created at https://stackblitz.com/edit/primeng-pic ... emo-9b8l9b

Code: Select all

<p-pickList
  [source]="sourceProducts"
  [target]="targetProducts"
  sourceHeader="Available"
  targetHeader="Selected"
  dragdrop="true"
  [responsive]="false"
  [sourceStyle]="{ height: '300px' }"
  [targetStyle]="{ height: '300px' }"
  (onTargetSelect)="onTargetSelect($event)"
  (onMoveToSource)="onMoveToSource($event)"
  (onMoveAllToSource)="onMoveToSource($event)"
  [disabled]="disabled"
  (blur)="onBlur()"
  (onTargetReorder)="onTargetReorder($event)"
>
  <ng-template let-product pTemplate="item">
    <h5 class="p-mb-2">{{ product.label }}  <span *ngIf="product.default">*</span></h5>
  </ng-template>
</p-pickList>

Code: Select all

  onMoveToSource(event) {
    const defaultItems = event.items.filter((item: any) => item.default);

    if (defaultItems.length > 0) {
      console.log('Default Items Selected', defaultItems);
    }

    const ids = [];
    defaultItems.forEach((item: any) => ids.push(item.value));

    this.sourceProducts = this.sourceProducts.filter((item: any) => {
      const idx = ids.findIndex((id) => id === item.value);
      return idx < 0;
    });

    if (this.targetProducts.length > 0) {
      this.targetProducts = [...this.targetProducts, ...defaultItems];
    } else {
      this.targetProducts = defaultItems;
    }

    this.change.detectChanges();
  }