CODEWITHSUNDEEP
angulartypescriptprimengprimeng-turbotable
Boris
Boris

Reputation: 475

How to disable the option to deselect a row on TurboTable component?

So I have a table with data that gets populated throughout the use of the application. When a user clicks on a row, the row is highlighted and that row's data is populated beneath the table. I just want to disable the option of the user to deselect a row (this is done by clicking on the row again).

The code: 

<p-table #purchaseOrdersList
         [value]="purchaseOrders"
         selectionMode="single"
         [(selection)]="selectedPurchaseOrder"
         (onRowSelect)="onRowSelect($event)"
          >

<ng-template pTemplate="header">
    <tr>
      <th class="supplier-number-col">Supplier Number</th>
      <th class="supplier-name-col">Supplier Name</th>
      <th class="supplier-phone-col">Supplier Phone</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-purchaseOrder>
    <tr [pSelectableRow]="selectedRow">
      <td>{{purchaseOrder.supplierNumber}}</td>
      <td>{{purchaseOrder.supplierName}}</td>
      <td>{{purchaseOrder.supplierPhoneNumber}}</td>
    </tr>
  </ng-template>

</p-table>

Upvotes: 4

Views: 5990

Answers (4)

Stephanie
Stephanie

Reputation: 538

I'm using PrimeNG 9.1 and had to adapt HammerNL's solution as follows to prevent row deselection:

cancelUnselect(event) {
    this.purchaseOrdersList.selection = event.data;
    this.purchaseOrdersList.selectionChange.emit(event.data);
    this.purchaseOrdersList.updateSelectionKeys();
  }

updateSelectionKeys is necessary if you use the table's "dataKey" property

Upvotes: 3

HammerNL
HammerNL

Reputation: 1841

I was having the exact same question, and came up with two solutions: a very simple one, and a slightly more complex solution:

Simple solution:

tr.ui-state-highlight {
    pointer-events: none;
}

This will prevent any selected row from being clicked again, thereby preventing deselection.

However, this will also prevent double-clicking the row. So if you need double-clicking, use the following solution:

Slighty more complex solution:

Add the following attribute to the p-table: (onRowUnselect)="cancelUnselect($event)", and then in your component do:

private _selectedPurchaseOrder: any;

get selectedPurchaseOrder() {
    return this._selectedPurchaseOrder;
}

set selectedPurchaseOrder(value: any) {
    if (value) {
        this._selectedPurchaseOrder = value;
    } else {
        this.purchaseOrdersList.selection = this._selectedPurchaseOrder;
    }
}

cancelUnselect(event) {
        this.purchaseOrdersList.selection = event.data;
}

This will prevent deselection of a row in all cases, and double-clicking is still possible.

Upvotes: 6

BHAVIK
BHAVIK

Reputation: 899

<p-table #purchaseOrdersList
         [value]="purchaseOrders"
         selectionMode="single"
         [(selection)]="selectedPurchaseOrder"
         (onRowSelect)="onRowSelect($event)"  (onRowUnselect) = "onRowUnselect()"
          >

<ng-template pTemplate="header">
    <tr>
      <th class="supplier-number-col">Supplier Number</th>
      <th class="supplier-name-col">Supplier Name</th>
      <th class="supplier-phone-col">Supplier Phone</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-purchaseOrder>
    <tr [pSelectableRow]="selectedRow">
      <td>{{purchaseOrder.supplierNumber}}</td>
      <td>{{purchaseOrder.supplierName}}</td>
      <td>{{purchaseOrder.supplierPhoneNumber}}</td>
    </tr>
  </ng-template>

</p-table>

In The .ts file you can use as

onRowUnselect() {

        var selectedCount = this.selectedPurchaseOrder.length;

        //  this.isDeleteShow = (selectedCount >0);
        $(".PATotalRowsSelected").html("(" + selectedCount + " selected)");

    }

Upvotes: 0

Boris
Boris

Reputation: 475

This can now be solved through metaKeySelection option. Setting it to true will allow row deselection only when the meta key is held.

Upvotes: 2

Related Questions