Identifying row expansion in ngx-datatable: detecting expand status on row click

Question

Identifying row expansion in ngx-datatable: detecting expand status on row click

Is there a way to determine if a line has already been expanded when using the toggle feature? When you click on a line, it expands and shows the details. Here is some code in HTML:

 <ngx-datatable
   #dataTable
   ...
   (select)='onRowSelect($event)'
   (activate)="onLoadDataDetails($event)">

In TypeScript:

  onRowSelect(row: any): void {
    if (row && row.selected) {
      this.dataTable.rowDetail.toggleExpandRow(row.selected[0]);
    }
  }

  onLoadDataDetails(row: any): void {
    if (row.type === 'click') {
      this.loadDetails(row.row.id);
    }
  }

If the request (this.loadDetails) is triggered every time a line is opened or closed, how can we prevent that?

angular typescript ngx-datatable

Answer 1

Answer №1

I was able to successfully resolve this issue by adding a method to set an internal variable.

<ngx-datatable-row-detail
 #myDetailRow>
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
    <div *ngIf="expanded?setExpandStatus(expanded):false"></div>

Here is the code snippet for the component:

  setExpandStatus(expanded: any): void {
    this.rowIsNotExpanded = expanded;
  }

  onLoadDataDetails(row: any): void {
    if (row.type === 'click') {
      if (!this.rowIsNotExpanded) {
        this.loadDetails(row.row.id);
      }
    }
  }

Answer 2

I was able to successfully resolve this issue by adding a method to set an internal variable.

<ngx-datatable-row-detail
 #myDetailRow>
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
    <div *ngIf="expanded?setExpandStatus(expanded):false"></div>

Here is the code snippet for the component:

  setExpandStatus(expanded: any): void {
    this.rowIsNotExpanded = expanded;
  }

  onLoadDataDetails(row: any): void {
    if (row.type === 'click') {
      if (!this.rowIsNotExpanded) {
        this.loadDetails(row.row.id);
      }
    }
  }

Identifying row expansion in ngx-datatable: detecting expand status on row click

Answer №1

Similar questions

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

Bringing in TypeScript definitions for gridster

What is the best data type in Asp Net Core C# for capturing Angular's blob object?

Using Typescript to create an asynchronous function without explicitly declaring a Promise

Angular2 with Webpack causes duplication of styles in the header

Tips for incorporating multiple services within a single Angular component

Issue: Inadequate parameters have been supplied for the localized pathname (getPathname()). This problem arose after the inclusion of "next-intl/routing" module

Repositioning the initial location of mat-slider

Angular 5 - Empty array containing objects has a length of zero

Having trouble resolving parameters? Facing an Angular dependency injection problem while exporting shared services?

Displaying HTML content using Typescript

Angular 2's Http Post function mistakenly triggers dual ajax requests instead of a single one

Every time I attempt to create a new ionic project using angular through the console, I encounter the error message: "npm ERR! Cannot read properties of undefined (reading 'isServer')"

The first click does not trigger the update for the md-autocomplete

Typescript sometimes struggles to definitively determine whether a property is null or not

swap out an element in an array with an extra element

How to make a routerLink clickable within an anchor tag in Angular 6

Aliases in Typescript are failing to work properly when used alongside VSCode Eslint within a monorepository

CORS policy has blocked the Node.JS OvernightJS Express CORS XMLHttpRequest request