TurboTable select/unselect programmatically

6.2k Views Asked by At

I have a TurboTable definition with checkbox selection like below:

<p-table [columns]="cols" [value]="dataJSONArray" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" dataKey="OrderId">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col style="width: 3em">
      <col *ngFor="let col of columns" [ngStyle]="{'width': col.widthPx + 'px'}">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
      <td>
        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
      </td>
...

If i change dtSelectedRows array (selection), nothing happens (dtSelectedRows array changes, but checked columns does not change -stay checked-):

this.dtSelectedRows.splice(indx, 1);

But if i assign an array to dtSelectedRows array, changes take affect:

let dummySelectedRow = Object.assign([], this.dtSelectedRows);
dummySelectedRow.splice(indx, 1);
this.dtSelectedRows = dummySelectedRow;
1

There are 1 best solutions below

8
Muhammed Albarmavi On BEST ANSWER

You need to set the selection mode proprty to single in this case the dtSelectedRows will be refrence to object instand of array of selected value.

<p-tableHeaderCheckbox></p-tableHeaderCheckbox> set selection mode to multiple selection , you can solve this is to use p-tableRadioButton (radio button) if you want to support single selection mode

<p-table  [columns]="cols" [value]="data" [paginator]="true" [rows]="10" [scrollable]="true"
  [(selection)]="dtSelectedRows" >
  <ng-template pTemplate="header">
    <tr>
      <th>
      </th>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-col>
    <tr [pSelectableRow]="rowData">
       <td>
        <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
      </td>
      <td *ngFor="let col of cols">{{rowData[col.field]}}<td>
    </tr>
  </ng-template>
</p-table>

set selected item by method

  setSelectedItem(){
    this.dtSelectedRows = this.data[0];
  }

In case of you want to remove an item based on condition in multiple mode

  removeUnvalidItem(){
    if (this.dtSelectedRows) {
      this.dtSelectedRows = this.dtSelectedRows.filter(car => car.year > 2005) 
    }
  }

stackblitz demo