CODEWITHSUNDEEP
angularprimengprimeng-turbotable
Nitesh Kumar Anand
Nitesh Kumar Anand

Reputation: 621

PrimeNG Turbotable master selection does not update on page change

I am working on a PrimeNG turbotable with checkbox to select all items on a page. I am running into an issue when page changes the master selection checkbox does not update.

enter image description here

The source code is available on plnkr, https://next.plnkr.co/edit/YFIfVpER0FFaoiQU?preview

Upvotes: 0

Views: 591

Answers (1)

Nitesh Kumar Anand
Nitesh Kumar Anand

Reputation: 621

I had to override 2 methods, toggleRowsWithCheckbox and updateCheckedState of Turbotable to achieve this. If somebody is interested in how I did it or the code, it is here below. This goes in the constructor of my TurboTable wrapper.

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);
  }

I have used "lodash" for some of the operations, like intersection, map, remove, each etc.

Upvotes: 1

Related Questions