I have integrated px-data-table into my Angular2 application. The data-table setup in my code looks like this:
<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>
When a user selects multiple rows, the function selectedChanged($event) is triggered and the rows are highlighted. I am trying to figure out how to programmatically uncheck these selected rows, as opposed to relying on user interaction. I have attempted the following methods without success:
Triggering the 'px-select-all-click' event from Angular using:
this.myTableRef.nativeElement.fire('px-select-all-click') this.myTableRef.nativeElement.fire('px-select-all-click', this.myTableRef.nativeElement.selectedRows) // Even after invoking ChangeDetectorRef.detectChanges(), it did not yield the desired result.Targeting the checkbox with the ID 'selectAllCheckbox' from Angular with:
this.myTableRef.nativeElement.shadowRoot.querySelector('selectAllCheckBox') this.myTableRef.nativeElement.querySelector('selectAllCheckbox') // Both return null, preventing me from proceeding with .click()Clearing the selectedRows attribute:
this.myTableRef.nativeElement.selectedRows = [];
Unfortunately, none of the above methods proved successful. Upon inspecting the aha-table.html imported within px-data-table.html, I discovered a useful method: _setAllRows(e), which deselects all rows when called with _setAllRows(false). If only this method were accessible or callable from Angular, it would provide a solution to my problem of unchecking selected rows.
If you have any suggestions or solutions, they would be greatly appreciated.