Checkbox select all not working properly with server-side pagination

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Using server side pagination and checkbox selection:

• go to page 1, select some items
• got to another page, push the “select all” checkbox

Current behavior

• it will select only the elements in the new page, removing the selection of the previous page

Expected behavior

• all the elements of the new page should be added to the selection, without removing the previously selected items

Reproduction of the problem The reproduction steps are listed above. Also, I need to specify that this is NOT related with https://github.com/swimlane/ngx-datatable/issues/874 , since I set the [rowIdentity] function and the single selection works fine even across different pages (except for the “select all” button).

Please tell us about your environment:

Angular CLI: 1.7.3
Node: 8.9.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

• Table version: 0.8.x

• Angular version: 5.2.9

• Browser: Google Chrome 65.0.3325.181 (Official Build) (64-bit)

• Language: TypeScript 2.6.2

[RonjaKnudtsen]

Found a solution using custom checkboxes, and custom select all function. And an object that stores which pages has selected all.

Custom checkbox column taken from http://swimlane.github.io/ngx-datatable/#chkbox-selection-template Here i removed let-allRowsSelected=“allRowsSelected” let-selectFn=“selectFn” From template, and hooked up my own checkbox function.

<ngx-datatable-column
      [width]="30"
      [sortable]="false"
      [canAutoResize]="false"
      [draggable]="false"
      [resizeable]="false">
      <ng-template
        ngx-datatable-header-template
        let-value="value">
        <input type="checkbox"
               [checked]="selectAllOnPage[pageOffset]"
               (change)="selectAll($event)"
      />
      </ng-template>
      <ng-template
        ngx-datatable-cell-template
        let-value="value"
        let-isSelected="isSelected"
        let-onCheckboxChangeFn="onCheckboxChangeFn"
      >
        <input
          type="checkbox"
          [checked]="isSelected"
          (change)="onCheckboxChangeFn($event)"
        />
      </ng-template>
    </ngx-datatable-column>

With this select all function (CompanyListPaginated are my rows, for the page)

selectAll(event) {
   if (!this.selectAllOnPage[this.pageOffset]) {
     // Unselect all so we dont get duplicates.
     if (this.selected.length > 0) {
       this.companyListPaginated.map(company => {
         this.selected = this.selected.filter((selected) => selected.uuid !== company.uuid);
       })
     }
     // Select all again
     this.selected.push(...this.companyListPaginated);
     this.selectAllOnPage[this.pageOffset] = true;
   } else {
     // Unselect all
     this.companyListPaginated.map(company => {
       this.selected = this.selected.filter((selected) => selected.uuid !== company.uuid);
     });
     this.selectAllOnPage[this.pageOffset] = false;
   }
 }

Remember to remove selectAll page index when unselecting a single item.

  onSelect({ selected }) {
    // Make sure we are no longer selecting all
    this.selectAllOnPage[this.pageOffset] = false;

    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  }

However i really wished i didnt have to handle this manually. One of the reasons i chose ngx datatable is that I wanted to avoid making custom select/select all functions.

[yashgarg03]

Found a solution using custom checkboxes, and custom select all function. And an object that stores which pages has selected all.

Custom checkbox column taken from http://swimlane.github.io/ngx-datatable/#chkbox-selection-template Here i removed let-allRowsSelected=“allRowsSelected” let-selectFn=“selectFn” From template, and hooked up my own checkbox function.

<ngx-datatable-column
      [width]="30"
      [sortable]="false"
      [canAutoResize]="false"
      [draggable]="false"
      [resizeable]="false">
      <ng-template
        ngx-datatable-header-template
        let-value="value">
        <input type="checkbox"
               [checked]="selectAllOnPage[pageOffset]"
               (change)="selectAll($event)"
      />
      </ng-template>
      <ng-template
        ngx-datatable-cell-template
        let-value="value"
        let-isSelected="isSelected"
        let-onCheckboxChangeFn="onCheckboxChangeFn"
      >
        <input
          type="checkbox"
          [checked]="isSelected"
          (change)="onCheckboxChangeFn($event)"
        />
      </ng-template>
    </ngx-datatable-column>

With this select all function (CompanyListPaginated are my rows, for the page)

selectAll(event) {
   if (!this.selectAllOnPage[this.pageOffset]) {
     // Unselect all so we dont get duplicates.
     if (this.selected.length > 0) {
       this.companyListPaginated.map(company => {
         this.selected = this.selected.filter((selected) => selected.uuid !== company.uuid);
       })
     }
     // Select all again
     this.selected.push(...this.companyListPaginated);
     this.selectAllOnPage[this.pageOffset] = true;
   } else {
     // Unselect all
     this.companyListPaginated.map(company => {
       this.selected = this.selected.filter((selected) => selected.uuid !== company.uuid);
     });
     this.selectAllOnPage[this.pageOffset] = false;
   }
 }

Remember to remove selectAll page index when unselecting a single item.

  onSelect({ selected }) {
    // Make sure we are no longer selecting all
    this.selectAllOnPage[this.pageOffset] = false;

    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  }

However i really wished i didnt have to handle this manually. One of the reasons i chose ngx datatable is that I wanted to avoid making custom select/select all functions.

Thanks for your answer here I’m confused that what is selectAllOnPage & pageOffset in this code and also I’m facing one more issue that if I click on select all checkbox then when I’m hovering on list then my records are getting selected otherwise my records are not getting selected can you please help me