AngularJS 2 - Primeng DataTable - Multi select, row grouping : Set checkboxes for rows at runtime

Question

I am using PrimeNG Ultima theme in my Angular JS application. I have datatable like below with multiple selection and row grouping.

<p-dataTable #restrictionDT 
      [value]="apprestrictions" 
      selectionMode="multiple" 
      [(selection)]="selectedApprestrictions" 
      sortField="belongsTo" 
      rowGroupMode="subheader" 
      groupField="belongsTo" 
      expandableRowGroups="false" 
      [responsive]="true">
          <ng-template pTemplate="rowgroupheader" let-rowData>
                      {{rowData['belongsTo']}}
          </ng-template>
       <p-column selectionMode="multiple"></p-column>
       <p-column field="id" header="ID"></p-column>
       <p-column field="name" header="Name"></p-column>
       <p-column field="displayBelongsTo" header="Belongs To"></p-column>
</p-dataTable>

I can see my datatable like below. I am able to select individual row, can select multiple rows, I can also select all rows if I check checkbox on that top.

We have a requirement to group rows and I am able to do that also. Our requirement is that in row group header we need to add checkbox so that if user checks that checkbox only the rows belonging to that row group must be checked. For example in my datatable I will add check box beside A1. If that is checked then two rows with ID 1 and 5 must be selected but not others.

I already approached PrimeNG team and they say as of now p-datatable will not support what we want. So I am trying to see what I can do. From debug I noticed that each row has p-dtcheckbox and ng-reflect-checked will be true when it is checked and false when it is not. So I am trying to set that in my typescript code. Can anybody tell me how to do this.

Please see my code below

import { Component, OnInit, ViewChild, OnDestroy, ElementRef } from '@angular/core';

@ViewChild('restrictionDT') restrictionDT: ElementRef;

console.log(this.restrictionDT);

console.log(this.restrictionDT) works good and I can see data table in my browser console. But this.restrictionDT.nativeElement is undefined so there I am stuck

UPDATE I made below changes and now able to see p-datatable in my console log. Now I want to loop each row for a particular row group and select the checkboxes.

@ViewChild('restrictionDT') restrictionDT: any;

console.log(this.restrictionDT.el.nativeElement);

SOLUTION :

I am able to solve the issue. Data Table has a property called selection which is binded to a property which is in your component.ts file which is of array type. Just add the elements to your that array which ever you want selected. Thats all it's simple.

<p-dataTable [value]="apprestrictions" selectionMode="multiple" [(selection)]="selectedApprestrictions"

In your component.ts do this

selectedApprestrictions: AppRestriction[] = [];
this.selectedApprestrictions.push({ id: 1, name: 'Restriction 1', belongsTo: 'A1', belongsToIndicator: ['A'], displayBelongsTo: 'A1' });
this.selectedApprestrictions.push({ id: 5, name: 'Restriction 5', belongsTo: 'A1', belongsToIndicator: ['A, S'], displayBelongsTo: 'A1' });