Search code examples
angularprimengprimeng-turbotable

TurboTable select/unselect programmatically


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;

Solution

  • 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