Tips for managing a dblclick event on a row with data in a kendo-grid while using Angular2

Question

Tips for managing a dblclick event on a row with data in a kendo-grid while using Angular2

Currently I am working with Angular2 and TS using kendo-grid. It allows me to access the data of the clicked row, but only for a singleClick event like so:

(cellClick)="onCellClick($event.dataItem)"

.

However, there is no direct way to achieve this for a doubleClick event. The code would look something like:

(dblclick)="onDblClick(<<CANNOT_GET_ROW_DATA_HERE>>)"

.

Does anyone know how to handle a double click event without relying on cellClick, and still be able to access the exact row we are interested in?

angular typescript kendo-grid double-click ondblclick

Answer 1

Answer №1

It's really quite straightforward.

All you need to do is include both event listeners in your <kendo-grid> settings.

    <kendo-grid
                (cellClick)="onCellClick($event.dataItem)"
                (dblclick)="onDblClick()">

Then, in your controller:

Add a new global variable:

class MyClass { clickedRowItem: myObject; ..... }

Set the value from cellClick to this variable:

onCellClick(dataItem: myObject) { this.clickedRowItem = trackerId; }

Execute the dblFunction using the variable as the argument:

onDblClick() { this.myFunctionToFire(this.clickedRowItem); }

Answer 2

It's really quite straightforward.

All you need to do is include both event listeners in your <kendo-grid> settings.

    <kendo-grid
                (cellClick)="onCellClick($event.dataItem)"
                (dblclick)="onDblClick()">

Then, in your controller:

Add a new global variable:

class MyClass { clickedRowItem: myObject; ..... }

Set the value from cellClick to this variable:

onCellClick(dataItem: myObject) { this.clickedRowItem = trackerId; }

Execute the dblFunction using the variable as the argument:

onDblClick() { this.myFunctionToFire(this.clickedRowItem); }

Tips for managing a dblclick event on a row with data in a kendo-grid while using Angular2

Answer №1

Similar questions

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

Issue with Angular 2 Teamcity Error

Component declaration in Typescript is being rejected due to the union type not being accepted

Is it necessary to include explicit overlapping imports in Angular if they are already imported in the parent component?

Guide on transitioning an Angular 4 project created in Visual Studio 2015 to Angular 6 with Visual Studio Code

Troubleshooting Angular 2 Final Release Visual Studio - encountering issues with finding module name and incorrect module.id path leading to 404 errors

The type of Object.values() is not determined by a union or Records

The Angular module does not have any exported member named 'ButtonFillMode'

Facing issue with local redis session not functioning as intended

Building a comprehensive project using Prisma and Next.JS in TypeScript - encountering an issue where the props "Component" and "pageProps" are deemed invalid

There is no index signature in the type 'string | number | EnvType' that accepts a parameter of type 'string'

Setting up Bootstrap 4 in VS 2017 and Angular 4

What is the best way to permit multiple instances of a component in separate tabs without losing their individual states?

Retrieve a particular element from an array within a JSON object using Ionic

Adding a custom button to CkEditor 5 in Angular 12: Step by step tutorial

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

Leveraging the power of Angular4 to dynamically iterate through SVG elements with the

Is it possible for us to integrate the Neo4j application's output into our Angular and NodeJS front-end?

Testing the Angular component with service: An error occurred while trying to access the `diagnosticData` property as it was found to be undefined