Kendo Angular - How to get data on the doubleClick event on Kendo Grid?

Question

How to get data on the doubleClick event on Kendo Grid?

I would like to get the same object that I fetch at the selected event, which would be dataitem in the position of IndexRowSelected

Html:

<kendo-grid
    #myGrid
    [data]="gridData"
    [selectable]="true"
    (selectionChange)="onSelection($event)"
    (dblclick)="doubleClickHandler(myGrid, $event)">
</kendo-grid>

TS:

onSelection(event){
   //dataItem at row selected
   event.selectedRows[0].dataItem
}

doubleClickHandler(grid, event){

//get dataItem like onSelection function

}

dataItem object example: [{ "id":0, "name":"Chai", "category": "Beverages", "price": "18", "instock": "39"

}] thanks,

Federico

Answer 1

What I would do is handle the SelectionChange event ( documentation ) to get the dataItem from the selected row and then store the value in a private variable.

Then when you handle the double-click event, you'd simply reference the private variable's value.

Component's Template:

<kendo-grid [data]="gridData"
            [height]="410"
            [selectable]="true"
            (dblclick)="onGridDoubleClicked()"
            (selectionChange)="onGridSelectionChanged($event)">
    <!-- column definitions... -->
</kendo-grid>

Component's Typescript:

private selectedRecord: any | undefined;
onGridDoubleClicked(): void {
  // do something with this.selectedRecord
}

onGridSelectionChanged(e: SelectionEvent): void {
  if (!e.selectedRows?.length) {
    return;
  }
  this.selectedRecord = e.selectedRows[0].dataItem;
}

Example: https://stackblitz.com/edit/angular-n4cn9w-phvv6a?file=app%2Fapp.component.ts