jeudi 27 avril 2017

Angular JS TypeScript Primeng DataTable - Multi select, row grouping : Set checkboxes for rows at runtime

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>
                      
          </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.

Data Table

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. enter image description here

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




Aucun commentaire:

Enregistrer un commentaire