Hi

I have a use case with a straightforward Grid where my users would like to have actions bound to a double click and a popup-menu on right click.

I only found the onClick handler which of course works, but my users would prefer a double click. The reason they name is that they commonly select and copy data from the grid, which interferes with the onClick behaviour.

Is there some description how to achieve double click and right click behaviour on the Grid?

Thanks!

Hello, Heythem,

I`m clarifying that this is related to the Kendo UI Grid wrapper for React.

I`m posting the resolution of the internal ticket here for better visibility:

"I only had to add ".off " to the event listener so it would be executed once.

 var grid = $($(".k-grid")[1]).data("kendoGrid");
  grid.element.off('dblclick').on('dblclick','tbody tr[data-uid]',function (e) {

/// put your function cals here
});

Regards,
Stefan
Progress Telerik

But how do I get the cell (or field) of the row on which I right clicked.

I seems that onContextMenu just gives me the row

Thank you

Hello, Len,

As this thread has questions for the Kendo UI wrapper for React and the KendoReact Grid, please clarify which is the used product.

Also, a sample or a code snippet from the current configuration can prove helpful.

Regards,
Stefan
Progress Telerik

Kendo-react-grid

import '@progress/kendo-theme-default/dist/all.css';
import {process} from '@progress/kendo-data-query';
import {Grid, GridColumn, GridToolbar} from '@progress/kendo-react-grid';
import {DropDownList} from '@progress/kendo-react-dropdowns';
import {Window} from '@progress/kendo-react-dialogs';
import {ExcelExport} from '@progress/kendo-react-excel-export';
import {GridPDFExport} from '@progress/kendo-react-pdf';
import {Dialog, DialogActionsBar} from '@progress/kendo-react-dialogs';
import {Popup} from '@progress/kendo-react-popup';
import {Menu, MenuItem} from '@progress/kendo-react-layout';

rowRender = (trElement, dataItem) => {
const trProps = {
...trElement.props,
onContextMenu: (e) => {
e.preventDefault();
this.handleContextMenuOpen(e, dataItem.dataItem);
}
};
return React.cloneElement(trElement, {...trProps}, trElement.props.children);
}

handleContextMenuOpen = (e, dataItem) => {
this.fiels = e.field;
this.dataItem = dataItem;
this.dataItemIndex = this.state.tasks.findIndex(p => (p.rowid === this.dataItem.rowid));
this.offset = {left: e.clientX, top: e.clientY};
this.setState({
open: true
});
}

My code basically comes from one of the Grid and Popup demos

I just can't remember which ones

Thanx for assisting

Len

Hello, Len,

Thank you for the clarification.

I can assume that this is the example in question:
https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/context-menu/

In the example, we use the rowRender to attach the event, but the cellRender can be used to attach the event on the specific cell:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender

In that cell, there is access to the field of the cell, so this can be used to know which cell of the row was right-clicked.

Regards,
Stefan
Progress Telerik