primeng datatable paging loses selections on server side paging

Question

<p-dataTable #dt [value]="tabListItem" [rowStyleMap]="styleMap" [responsive]="true" (onLazyLoad)="paginate($event)" [headerCheckboxToggleAllPages]="false"
  [resizableColumns]="false" [rows]="numberOfRows" [pageLinks]="pageLinks" [paginator]="false" [sortOrder]="1" selectionMode="'multiple'" (onRowUnselect)="handleRowUnSelect($event)"
  [(selection)]="selectedRows" (onPage)="paginate($event)" [lazy]="true" [totalRecords]="totalListCount" (onRowSelect)="handleRowSelect($event)" [rowStyleClass]="lookupRowStyleClass">
  <p-column field="" header="" [style]="{'width':'3%'}" [styleClass]="'text-center'" selectionMode="multiple">
      <p-checkbox name="groupname" binary="true" (onChange)="selectRow($event,this,car)">
      </p-checkbox>
      <input type="checkbox" class="check-box" [ngModel]="checkboxValue" (ngModelChange)="selectRow($event,this,car)">
  </p-column>
  <p-column *ngFor="let data of tableHeaders" field="{{data.fieldNam}}" [sortable]="false" header="{{data.header}}" [style]="{'width':data.style.width}">

    <ng-template let-col let-dep="rowData" pTemplate="body">
      <span title="{{dep[data.fieldNam]}}">{{dep[data.fieldNam]}}</span>
    </ng-template>
  </p-column>


</p-dataTable>

My lazy loaded dataTable seems to work perfectly with checkboxes for multiple selections. When I click on another page, it delivers the selected rows in the array exactly as I think it should, and I have a correct array that holds those selections in the bean. I can then click on more checkboxes on that page and select additional rows with no problem.

Here is where my question comes in: When I go back to the previous page and it is displayed, I was expecting to see the rows I selected to STILL be selected and highlighted but they are not. When I look in the selectedRows array to see the contents of the selection array I understand why because I see that it only holds the selections from the 2nd page and no row keys on this first page match.

It appears to me (given I am doing everything correctly) that select multiple only delivers the selected rows for the rows on the currently displayed page of data and then it renders the new page of data - and nothing shows as selected because the selection array only contains rows that do not match the currently displayed data.

How can this be fixed

You can achieve this by saving your selection in to the state. If you add NgRx in to your angular project. Then pass the action when selection is made and once the selection is made it will be saved in the store. When you go back to different page the state will be retrieved. But this is the most robust way for complex projects. — Ragavan Rajan
logisticinfotech.com/blog/… - you can try this example. But any way I have added the angular way below — Ragavan Rajan

Ragavan Rajan Ragavan Rajan · Accepted Answer · 2018-08-30T22:54:42

You need to enable selection mode to multiple in <p-column> p-column tag

multiple selection in your html file:

seletionMode="multiple"

And (onRowSelect) should be set to the onRowSelect($event) method.

<p-dataTable #dt [value]="allTimesheetData" class="ui-g-12" sortField="startTime" sortOrder="1"
emptyMessage="No time entries found" [reorderableColumns]="true" columnResizeMode="fit" [resizableColumns]="true"
[globalFilter]="tableSearch" exportFilename="users" [editable]="true" 
(onEditComplete)="onEditComplete($event)" [(selection)]="selectedRows" 
(onRowSelect)="onRowSelect($event)">
<!-- Adding checkboxes to the datatable with selectionmode set to multiple check the css class selectBoxColumn-->
<p-column selectionMode="multiple" styleClass="selectBoxColumn"></p-column>

In your ts file:

export class DataTableComponent implements OnInit {
//for checkbox selection
selectedRows: Array<any>;
// trivial onRowSelect which just logs out the JSON 
onRowSelect(rowInfo) {
console.log(JSON.stringify(rowInfo.data)); // or this.selectedRow
}

In your CSS file: Set the css to following

/* For checkbox selection */
p-dataTable>>>.selectBoxColumn {
width: 43px;
}

Just to make the checkbox bigger.

Hope it helps.

primeng datatable paging loses selections on server side paging

1 Answers