Unchecking all the rows in px-data-table

Question

I am using px-data-table in an Angular2 application. The data-table is used as follows:

<px-data-table #myTableRef [tableData]='tableDetails' language="en" (px-row-click)="selectedChanged($event)" (px-select-all-click)="selectAll($event)" sortable selectable show-column-chooser>
    <px-data-table-column *ngFor="let header of headers" type="html" name="{{header.value}}" label="{{header.label}}" [disableHide]="header.disableHide" [hide]="!header.disableHide">
    </px-data-table-column>
</px-data-table>

The user selects more than one rows. So selectedChanged($event) is fired and multiple rows are selected. Now I'd like the selected rows to be unchecked from code not via user interaction. I went with the following approaches (which did not work):

1. Fire event 'px-select-all-click' from Angular by:

   this.myTableRef.nativeElement.fire('px-select-all-click')
   this.myTableRef.nativeElement.fire('px-select-all-click', this.myTableRef.nativeElement.selectedRows)
   // also did a ChangeDetectorRef.detectChanges() after injection but it did not work.
   

2. Select the checkbox with id 'selectAllCheckbox' from Angular by:

   this.myTableRef.nativeElement.shadowRoot.querySelector('selectAllCheckBox')
   this.myTableRef.nativeElement.querySelector('selectAllCheckbox')
   //returns null in both cases so I can't do a .click() on it
   

3. Empty the selectedRows attribute:

   this.myTableRef.nativeElement.selectedRows = [];
   

All three methods don't work. I was looking inside the aha-table.html imported inside the px-data-table.html and found a convenient method: _setAllRows(e) which unselects all the rows with _setAllRows(false). If only this was exposed or I could call this from Angular, I'd have my solution to the problem: unchecking the selected rows.

Any solutions would be helpful.

Answer 1

After noticing that the _setAllRows(e) is a method of aha-table which is a component nested under px-data-table component, accessing the method is easy according to the Polymer documentation for Local DOM API.

let tableRef = this.myTableRef.nativeElement;
tableRef.$$('aha-table')._setAllRows(false);

Basically $$('selector') is the Polymer shorthand for dynamically created nodes. If I get the reference for the aha-table node, I can call its methods.