Posted 3 July 2018, 6:21 am EST
Hi,
If you are using angular then wjFlexGridCellTemplate is the recommended way to display cell templates.
To select a row you can set isSelectedProperty of the row to true, then to get the selected rows you can iterate over rows and check if the isSelected property is set to true.
Please refer to following code snippet
/* appendcheckboxes in rowheaders */
<ng-template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
<input type="checkbox" [(ngModel)]="cell.row.isSelected">
</ng-template>
/* attach checkall rows checkbox in topleft cell */
<ng-template wjFlexGridCellTemplate [cellType]="'TopLeft'" let-cell="cell">
<input type="checkbox" [checked]="selectedRows.length>0"
[indeterminate]="selectedRows.length!=0&&selectedRows.length<grid.rows.length" (change)="selAll(grid.rows,$event.target.checked,true)">
</ng-template>
/* get selected rows*/
function getSelectedRows(grid){
let selRowIndices=[];
grid.rows.forEach(row=>{
if(row.isSelected){
selRowIndices.push(row.index);
}
});
return selRowIndices;
}
P.S. If the user is supposed to select only the rows and not cell ranges then please consider setting grid’s selectionMode property to ‘ListBox’. In LIstBox selection mode grid exposes selected rows via selectedRows property.
Please refer to the following which implements the same:-
https://stackblitz.com/edit/angular-p8kyyt?file=src%2Fapp%2Fapp.component.html
~Manish
