how to trigger group-row header expand manually ngx-datatable angular

Question

I am using ngx-datable to render a table with row grouping.

I am trying grouping of row dynamically.

<ngx-datatable 
      [groupExpansionDefault]="false" [groupRowsBy]="groupBy">

Initial value of groupBy is suppose "A";

Based on some event I change groupBy to "B".

The datatable itself is not updating the records. And when I click on header row it then updates the records. Rather it should automatically update the table records with new grouping.

Is there any solution for this or may be any way to simulate the click I mean manually expanding/collapsing the header row?

Nidhish Krishnan Nidhish Krishnan · Accepted Answer · 2019-06-12T15:53:00

Check out one example below

Working Demo

<ngx-datatable
    #myTable
    class='material expandable'
    [rows]="rows"
    [groupRowsBy]="'age'"
    [columnMode]="'force'"
    [scrollbarH]="true"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="40"
    [limit]="4"
    [groupExpansionDefault]="true">
    <!-- Group Header Template -->
    <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader (toggle)="onDetailToggle($event)">
      <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div style="padding-left:5px;">
          <a
            href="#"
            [class.datatable-icon-right]="!expanded"
            [class.datatable-icon-down]="expanded"
            title="Expand/Collapse Group"
            (click)="toggleExpandGroup(group)">
            <b>Age: {{group.value[0].age}}</b>
          </a>                          
        </div>
      </ng-template>
    </ngx-datatable-group-header>
    <!-- Row Detail Template -->
    <ngx-datatable-row-detail [rowHeight]="100" #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;">
          <div><strong>Address</strong></div>
          <div>row detail content sample</div>
        </div>
      </ng-template>
    </ngx-datatable-row-detail>
    <!-- Row Column Template -->
    <ngx-datatable-column
      [width]="50"
      [resizeable]="false"
      [sortable]="false"
      [draggable]="false"
      [canAutoResize]="false">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
        <a
          href="javascript:void(0)"
          [class.datatable-icon-right]="!expanded"
          [class.datatable-icon-down]="expanded"
          title="Expand/Collapse Row"
          (click)="toggleExpandRow(row)">
        </a>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Name" prop="name" editable="true"></ngx-datatable-column>
    <ngx-datatable-column name="Gender" prop="gender"></ngx-datatable-column>
    <ngx-datatable-column name="Age" prop="age"></ngx-datatable-column>
    <ngx-datatable-column name="Comment" prop="comment">
      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" 
      let-group="group" let-rowHeight="rowHeight">           
        <input autofocus
          (blur)="updateValue($event, 'comment', rowIndex)"
          type="text" 
          name="comment" 
          [value]="value"/>
      </ng-template>                
    </ngx-datatable-column>
  </ngx-datatable>

how to trigger group-row header expand manually ngx-datatable angular

1 Answers