Ngx-datatable: Header's Select All checkbox breaks "selected" model binding

[dstj]

I'm submitting a ... (check one with "x")

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

Current behavior
When I check the header's "Select All" checkbox, the [selected] model is not updated and never updated again.

When I check individual rows, the selected model is updated as long as I do not check the header's Select All.

The footer's selected count is still updated as expected.

Handling the (select) output with the splice/push combo as in the demo, is the way around it, but the documentation is pretty unclear.

Note: Maybe related to #818, I'm unsure...

Expected behavior
The header's "Select All" checkbox should update the selected model.

Reproduction of the problem
I reproduced it here: https://plnkr.co/5NHahUqqU1NVW2dH

What is the motivation / use case for changing the behavior?
It really looks broken... it half works, then stops without any error message in the logs.

Please tell us about your environment:

• Table version:
  "@swimlane/ngx-datatable": "^13.1.0"

• Angular version:
  Angular 6.1.3

• Browser:
  Tried in Chrome 68.0.3440.106 and Edge 42.17134.1.0

• Language:
  All

[james-poulose]

Does anybody have any work around for this please?

[hugochouinard]

I have the same exact behavior, in firefox and chrome
@swimlane/ngx-datatable: 14.0.0

[dstj]

@james-poulose, as mentioned in the original issue:

Handling the (select) output with the splice/push combo as in the demo, is the way around it, but the documentation is pretty unclear.

i.e. this one: http://swimlane.github.io/ngx-datatable/#chkbox-selection

And the relevant code is:

  onSelect({ selected }) {
    console.log('Select Event', selected, this.selected);

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

[gauravpandvia]

For me the above code was throwing an error like Cannot delete property 'x' of [object Array\

May be the above code, makes the properties in this.selected as non configurable. So, i changed the above code to the below and it worked now :-
` /**

• Function to emit checkbox event
• @param event
  */
  onSelect(event) {
  this.selected = [...event['selected']];
  ...code to handle other stuff
  }`

[manishsharma83]

@james-poulose, as mentioned in the original issue:

Handling the (select) output with the splice/push combo as in the demo, is the way around it, but the documentation is pretty unclear.

i.e. this one: http://swimlane.github.io/ngx-datatable/#chkbox-selection

And the relevant code is:

  onSelect({ selected }) {
    console.log('Select Event', selected, this.selected);

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

Thanks Bro...
Your code perfectly worked for me!!!

[Arti3DPlayer]

same for version 19.0.0 and angular 11.

onSelect({ selected }) {
    console.log('Select Event', selected, this.selected);

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

This is not working. When I click select all, all elements selected, but then something changing and only one left

[Arti3DPlayer]

https://user-images.githubusercontent.com/3278913/110382838-2291d680-8064-11eb-995b-814a17cedf38.mov

My onSelect method:

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

My datatable:

<ngx-datatable
                                    class="material striped"
                                    [rows]="invoiceItemGroups"
                                    [columnMode]="ColumnMode.force"
                                    [headerHeight]="headerHeight"
                                    [rowHeight]="'auto'"
                                    [footerHeight]="50"
                                    [limit]="15"
                                    [externalSorting]="true"
                                    [selected]="selectedInvoiceItemGroups"
                                    [selectionType]="SelectionType.checkbox"
                                    (sort)="onSort($event)"
                                    (select)="onSelect($event)"
                                    [sorts]="[{prop: storedParams.ordering.replace('-', ''), dir: (storedParams.ordering.startsWith('-')) ? 'desc' : 'asc'}]"
                                    [loadingIndicator]="invoiceItemGroupsIsLoading" #invoiceDatatable>

                                <ngx-datatable-column [width]="40"
                                                      [sortable]="false"
                                                      [canAutoResize]="false"
                                                      [draggable]="false"
                                                      [resizeable]="false">
                                    <ng-template ngx-datatable-header-template let-value="value"
                                                 let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
                                        <input type="checkbox" class="customCheckbox" [checked]="allRowsSelected"
                                               (change)="selectFn(!allRowsSelected)"/>
                                    </ng-template>
                                    <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
                                                 let-onCheckboxChangeFn="onCheckboxChangeFn">
                                        <input type="checkbox" class="customCheckbox" [checked]="isSelected"
                                               (change)="onCheckboxChangeFn($event)"/>
                                    </ng-template>
                                </ngx-datatable-column>