I have a TurboTable definition with checkbox selection like below:
<p-table [columns]="cols" [value]="dataJSONArray" [paginator]="true" [rows]="10" [scrollable]="true"
[(selection)]="dtSelectedRows" dataKey="OrderId">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width: 3em">
<col *ngFor="let col of columns" [ngStyle]="{'width': col.widthPx + 'px'}">
</colgroup>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of cols">{{col.header}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-col>
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
...
If i change dtSelectedRows array (selection), nothing happens (dtSelectedRows array changes, but checked columns does not change -stay checked-):
this.dtSelectedRows.splice(indx, 1);
But if i assign an array to dtSelectedRows array, changes take affect:
let dummySelectedRow = Object.assign([], this.dtSelectedRows);
dummySelectedRow.splice(indx, 1);
this.dtSelectedRows = dummySelectedRow;
You need to set the selection mode proprty to single
in this case the dtSelectedRows
will be refrence to object instand of array of selected value.
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
set selection mode tomultiple
selection , you can solve this is to use p-tableRadioButton (radio button) if you want to support single selection mode
<p-table [columns]="cols" [value]="data" [paginator]="true" [rows]="10" [scrollable]="true"
[(selection)]="dtSelectedRows" >
<ng-template pTemplate="header">
<tr>
<th>
</th>
<th *ngFor="let col of cols">{{col.header}}</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-col>
<tr [pSelectableRow]="rowData">
<td>
<p-tableRadioButton [value]="rowData"></p-tableRadioButton>
</td>
<td *ngFor="let col of cols">{{rowData[col.field]}}<td>
</tr>
</ng-template>
</p-table>
set selected item by method
setSelectedItem(){
this.dtSelectedRows = this.data[0];
}
In case of you want to remove an item based on condition in multiple mode
removeUnvalidItem(){
if (this.dtSelectedRows) {
this.dtSelectedRows = this.dtSelectedRows.filter(car => car.year > 2005)
}
}