How to retain selection of checkbox after clicking cancel button in PrimeNG p-table?

Question

I have used below code to show dialog box with Ok and cancel buttons while unselecting checkbox inside PrimeNG p-table. If anyone is trying to cancel the unselection of checkbox, then I need to retain the selection of checkbox.

<p-table [value]="data" [scrollable]="true" scrollHeight="400px" frozenWidth="450px"
  dataKey="id" [(selection)]="chkBoxSelectedFARow" editMode="row" 
  [first]="first" [totalRecords]="totalRecordsCount" [rows]="20" selectionMode="multiple"
  [lazy]="true" (onPage)="loadpaginator($event)"
  autoLayout="true" sortMode="single" (onRowSelect)="onRowEditSelect($event)" (onHeaderCheckboxToggle)="rowChangeGrid($event)"
  [customSort]="true" (onRowUnselect)="onRowEditUnselect($event)">
<ng-template pTemplate="header">
  <tr>
    <th><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>
    <th>Id</th>
    <th>Number</th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-data let-rowIndex="rowIndex">
  <tr [pSelectableRow]="data" [pSelectableRowIndex]="rowIndex">
    <td><p-tableCheckbox #chkRowData [value]="data" [index]="rowIndex"></p-tableCheckbox></td>
    <td>{{data.id}}</td>
    <td>{{data.number}}</td>
  </tr>
</ng-template>
</p-table>

How to retain the selection of checkbox after clicking cancel button in the dialog box?

Stackblitz demo

@yurzui, If you have spare time, please look into this question. — RGS, Dec 01 '19 at 05:22

score 0 · Answer 1 · answered Dec 02 '19 at 08:26

Everytime you unselect a row, stock its id in a buffer variable. Then, when you cancel the action, just put back the corresponding object to your selection.

  onRowEditUnselect($event) {
    this.lastUnselectedCheckbox = $event.data.id; // stock last unchecked item
    this.unCheckDisplayDialog = true;
  }


  cancelRow() {
    let checkboxToAdd = this.data.filter(
      item => item.id === this.lastUnselectedCheckbox
    )[0]; // search corresponding object
    checkboxToAdd.status = true;
    this.selection.push(checkboxToAdd); // put it back to selection
    this.selection = [...this.selection];
    this.unCheckDisplayDialog = false;
  }

See Stackblitz

How to retain selection of checkbox after clicking cancel button in PrimeNG p-table?

1 Answers1