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

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