ngx-datatable Retrieve the most recent clicked row using multi-click mode

Question

ngx-datatable Retrieve the most recent clicked row using multi-click mode

Currently, I am attempting to retrieve the most recent 'clicked' row from ngx-datatable. Here is what I have in my code:

<ngx-datatable
   [rows]="rows"
   [selected]="selected"
   [selectionType]="'multiClick'"
   (select)='onSelect($event)'
   (dblclick)='onDoubleClick($event)'
>

Since the selected rows are stored in 'rows', one approach that almost works is to obtain the latest selected row in this manner:

const latest = selected[selected.length - 1];

However, the issue arises when the latest clicked row is deselected (having been selected at a prior point), causing it to be removed from the 'selected' array and rendering the above approach ineffective. Is there an alternative method to resolve this issue and accurately retrieve the latest 'clicked' row?

angular typescript ngx-datatable

Answer 1

Answer №1

If you are referring to the most recently selected row, the solution is simple. Just insert

const latest = selected[selected.length - 1];

into the onSelect() function.

For example:

onSelect({ selected }) {
   this.selected.splice(0, this.selected.length);
   this.selected.push(...selected);

   const latest = this.selected[this.selected.length - 1];
   console.log('Latest', latest)
}

Since arrays are indexed, accessing by the last index will always provide you with the "last selected row".

However, if your goal is to retrieve the last clicked row (regardless of whether the user is selecting or deselecting the row), you can achieve this using the onActivate() event handler.

For instance:

onActivate(event) {
   if(event.type === "click"){
     console.log(event.row)
   }
}

This approach will give you the "last clicked row" regardless of whether the user is selecting or deselecting the row.

Make sure to bind the activate event to your onActivate() function.

<ngx-datatable>
   ...
   (activate)="onActivate($event)
   ...
</ngx-datatable>

Answer 2

If you are referring to the most recently selected row, the solution is simple. Just insert

const latest = selected[selected.length - 1];

into the onSelect() function.

For example:

onSelect({ selected }) {
   this.selected.splice(0, this.selected.length);
   this.selected.push(...selected);

   const latest = this.selected[this.selected.length - 1];
   console.log('Latest', latest)
}

Since arrays are indexed, accessing by the last index will always provide you with the "last selected row".

However, if your goal is to retrieve the last clicked row (regardless of whether the user is selecting or deselecting the row), you can achieve this using the onActivate() event handler.

For instance:

onActivate(event) {
   if(event.type === "click"){
     console.log(event.row)
   }
}

This approach will give you the "last clicked row" regardless of whether the user is selecting or deselecting the row.

Make sure to bind the activate event to your onActivate() function.

<ngx-datatable>
   ...
   (activate)="onActivate($event)
   ...
</ngx-datatable>

ngx-datatable Retrieve the most recent clicked row using multi-click mode

Answer №1

Similar questions

Issue with Angular RC5: Unable to bind to 'myDirective' because it is not recognized as a property of 'div' element

Typescript includes empty spaces in its duplicate-checking process

What is the best way to divide an array into groups of four elements when using ngFor

I am having trouble getting debugging with source maps to work in VSCode and Browserify

Implementing Object.somefunction() in ngFor with Angular

Utilizing ES6 JavaScript for Creating Static Methods and Angular 2 Services

Maintain synchrony of the state with swiftly unfolding occurrences

"Exploring the possibilities of integrating Typescript into Material-UI themes: A step-by

Issues with TypeScript arise when transferring arguments between functions

Generic parameter with a union type

An uncommon token was found by Jest - import (Angular CLI 6)

Controlling table row validation in Angular 2

Change the spread operator in JavaScript to TypeScript functions

What are the steps to achieve full screen mode in Google Chrome within an Angular 4 Application?

An unknown error has arisen: "The page https://registry.yarnpkg.com/react-native-template-react-native-template-typescript cannot be located."

Managing absence of ID field in Prisma and retrieving data from API request

To emphasize the chosen item following a component's update

Error in AWS Cloud Development Kit: Cannot access properties of undefined while trying to read 'Parameters'

The reason behind my struggle with mapping API responses to an Interface in Angular

What is the best way to optimize reactive values using the Vue composition API?