How to perform row double click event in kendo ui grid angular 2? - angularjs

Question

How to display orginal cell value in cell template <span> tag in angular 2 kendo ui grid.
Code
<ng-container ngFor="let col of grid.ColModel">
<kendo-grid-column [title]="col.Label" [field]="col.Name" [locked]="col.Locked" width="250px" *ngIf="hiddenColumns.indexOf(col.Name) === -1" >
<template kendoCellTemplate let-dataItem let-rowIndex="rowIndex" >
<span (dblclick)="open(rowIndex)">**{{dataItem}}** </span>
</template>
</kendo-grid-column>
</ng-container>

Answer 1

The example provided by Melanie might have worked in the past, but will not work with the Angular 2/4 Grid (if you click on the plunker, it won't load).
I have to do lots of debugging as I ran into the same issue.
The solution in a simple grid was as follows:
<kendo-grid #myGrid [selectable]="true" (dblclick)="dblClickEvent(myGrid, $event)">
<kendo-grid-column field="User" title="User" width="100">
</kendo-grid-column>
</kendo-grid>
in your .ts file, implement the event as follows:
dblClickEvent(grid, event) {
// debugger;
console.log('the selected row Index is '+ event.path[1].rowIndex);
//use the following line if you want to get the clicked cell content:
console.log('clicked cell content'+ event.path[0].textContent);
}
This would give your the selected row index, from which you can
Hope this helps.

Answer 2

The first argument in your double-click handler needs to be the double-click event (which you can access as $event in your template). You should pass that first and rowIndex second.
In addition, you're probably missing a lot of click events since you're using a span and your content is inside of a padded cell. I'd recommend that you make your entire cell a click target, for example by changing it to a div and getting rid of the padding on the containing td.
So your cell template might look like:
<kendo-grid-column field="MyField">
<template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="innerCell" (dblclick)="onRowDoubleClick($event, rowIndex)">
{{dataItem.MyField}}
</div>
</template>
</kendo-grid-column>
And your function:
onRowDoubleClick(evt, rowIndex) {
alert('You clicked row ' + rowIndex + '!');
}
And your styling:
td { padding: 0 !important; }
td > .innerCell { padding: 7px; cursor: pointer; }
Example: Plunker

Answer 3

Update:
If you have a sortable grid, you need to implement cellClick and dblClick like here:
https://stackblitz.com/edit/angular-ac3jzd?file=app/app.component.ts
This works for both: sorted and non sorted kendo grids
Orginal answer:
We like to define the dblclick on the grid and not on each column, So the answer from Adam works for us perfectly in chrome, but not in firefox.
Problem is that the path property is non-standard on the mouseevent and not provided in firefox (probably not in safari too)
Based on Adam's solution, we have solved it with:
<kendo-grid [selectable]="true" (dblclick)="dblClickEvent($event)">
<kendo-grid-column field="User" title="User" width="100"></kendo-grid-column>
</kendo-grid>
and:
dblClickEvent(event) {
let rowIndex;
if (event.path) { // works on chrome and all browsers supporting path property in mouseevent
rowIndex = event.path[1].rowIndex;
} else { // should work on all browsers
rowIndex = event.target.parentElement.rowIndex;
}
if (typeof rowIndex === 'number' && rowIndex < this.data.length) {
// do something
}
}
(this aussumes that the user has clicked inside a td-element)
Note: this does not work if the grid was sorted