How to remove expand button if no child exist ngx-datatable

133 views Asked by At

I am using the following code for generating tree view in ngx-datatable:

HTML:

<ngx-datatable
  [rows]="rows"
  class="material"
  [loadingIndicator]="false"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [columns]="columns"
  [rowClass]="getRowClass"
  [reorderable]="reorderable"
  [treeFromRelation]="'manager'"
  [treeToRelation]="'id'"
  [rows]="rows"
  (treeAction)="onTreeAction($event)"
>
  <ngx-datatable-column name="name" [flexGrow]="3" [isTreeColumn]="true">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="gender" [flexGrow]="3">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

TS:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  reorderable: boolean = true;
  loadingIndicator: boolean = true;

  rows = [
    {
      id: 1,
      name: 'Austin',
      gender: 'Male',
      company: 'Swimlane',
    },
    { id: 2, name: 'Dany', gender: 'Male', company: 'KFC' },
    {
      id: 3,
      name: 'Molly',
      gender: 'Female',
      company: 'Burger King',
      manager: 1,
      class: 'child-row-file',
    },
  ];
  columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
  onTreeAction(event: any) {
    console.log('toggle');
    const index = event.rowIndex;
    const row = event.row;
    if (row.treeStatus === 'collapsed') {
      row.treeStatus = 'expanded';
    } else {
      row.treeStatus = 'collapsed';
    }
    this.rows = [...this.rows];
  }
  getRowClass(event) {
    console.log(event);
    if (event.class) {
      if (event.class == 'child-row-file')
        return {
          'child-row-file': true,
        };
    }
  }
}

Code is working fine and I am able to generate tree view. Running example

Problem: As, you can check second parent has no child but it still showing expand button. How I can remove this button if no child present.

0

There are 0 answers