Primeng: Header selection checkbox does not update on page change

Created on 9 Sep 2018 · 5Comments · Source: primefaces/primeng

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://nbwiamqn.github.stackblitz.io
https://github-mqnfdt.stackblitz.io/

Current behavior
After selecting all rows from page 1 using header checkbox, when you navigate to page 2 and you will notice that the master selection checkbox in the header does not unselect.

Expected behavior
Upon page change or any other change event like sorting order or filter, the master selection checkbox state should be re-evaluated.

Minimal reproduction of the problem with instructions
Set the turbo-table with attribute [lazyload]=true and within template use p-tableHeaderCheckbox as the select-all checkbox. When the data is loaded for page 1, select all using master selection checkbox. Now navigate to page 2 and you will notice that the master selection does not unselect.
Attaching code from stackblitz, nbwiamqn.github.zip

What is the motivation / use case for changing the behavior?
Normal behavior

Please tell us about your environment:

Angular version: 5.X
5, 6
PrimeNG version: 5.X
6
Browser:
All
Language:
All
Node (for AoT issues): node --version =
8

Source

nkanand4

Most helpful comment

Override using prototype chain.

TableHeaderCheckbox.prototype.updateCheckedState = function () {
      const currentRows = _.map(this.dt.value, this.dt.dataKey);
      const selectedRows = _.map(this.dt.selection, this.dt.dataKey);
      this.rowsPerPageValue = this.dt.rows;
      const commonRows = _.intersection(currentRows, selectedRows);
      return commonRows.length === currentRows.length;
    };

    Table.prototype.toggleRowsWithCheckbox = function (event, check) {
      let _selection;
      if (!check) {
        _selection = this.value.slice();
        _.each(_selection, (row) => {
          const match = {}; match[this.dataKey] = row[this.dataKey];
          _.remove(this._selection, match);
        });
      } else {
        _selection = check ? this.filteredValue ? this.filteredValue.slice() : this.value.slice() : [];
        _.each(this._selection, (row) => {
          const match = {}; match[this.dataKey] = row[this.dataKey];
          _.remove(_selection, match);
        });
        this._selection = this._selection.concat(_selection);
      }

      this.preventSelectionSetterPropagation = true;
      this.updateSelectionKeys();
      this.selectionChange.emit(this._selection);
      this.tableService.onSelectionChange();
      this.onHeaderCheckboxToggle.emit({
        originalEvent: event,
        affectedRows: _selection,
        checked: check
      });
    };

Please let me know if this helped you or if you need any further help on this.

nkanand4 on 23 Jan 2019

❤2 🚀1 👍1

All 5 comments

I have been able to fix this issue by overriding the existing behavior and have tested it over a week successfully. If this is something other folks are interested in, I shall be more than happy to submit a pull request.

nkanand4 on 19 Sep 2018

@nkanand4, I am experiencing the same issue. How did you fix this?

michaelkoss on 22 Jan 2019

Override using prototype chain.

TableHeaderCheckbox.prototype.updateCheckedState = function () {
      const currentRows = _.map(this.dt.value, this.dt.dataKey);
      const selectedRows = _.map(this.dt.selection, this.dt.dataKey);
      this.rowsPerPageValue = this.dt.rows;
      const commonRows = _.intersection(currentRows, selectedRows);
      return commonRows.length === currentRows.length;
    };

    Table.prototype.toggleRowsWithCheckbox = function (event, check) {
      let _selection;
      if (!check) {
        _selection = this.value.slice();
        _.each(_selection, (row) => {
          const match = {}; match[this.dataKey] = row[this.dataKey];
          _.remove(this._selection, match);
        });
      } else {
        _selection = check ? this.filteredValue ? this.filteredValue.slice() : this.value.slice() : [];
        _.each(this._selection, (row) => {
          const match = {}; match[this.dataKey] = row[this.dataKey];
          _.remove(_selection, match);
        });
        this._selection = this._selection.concat(_selection);
      }

      this.preventSelectionSetterPropagation = true;
      this.updateSelectionKeys();
      this.selectionChange.emit(this._selection);
      this.tableService.onSelectionChange();
      this.onHeaderCheckboxToggle.emit({
        originalEvent: event,
        affectedRows: _selection,
        checked: check
      });
    };

Please let me know if this helped you or if you need any further help on this.

nkanand4 on 23 Jan 2019

❤2 🚀1 👍1

I'm unable to replicate with the latest PrimeNG. If the issue still persists with the new version please create a new issue with our stackblitz template.