Kendo React Grid: Double click and right click menu

[Joe]

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!

[Stefan]

Hello, Joe,

In this case, I can suggest using a rowRender and attaching the additional event handlers on these events. The event will also have access to the data for the clicked row:

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

This is an example of how it can be achieved:

https://stackblitz.com/edit/react-7mz85d?file=app/renderers.js

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Binyam]

Is it possible to access props passed from another component?

[Stefan]

Hello, Binyam,

Yes, this is possible by passing the desired prop to the function call.

I modified the example to showcase this:

https://stackblitz.com/edit/react-7mz85d-mux2ks?file=app%2Fmain.js

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Binyam]

Thank you

[Heythem]

Hello , 

I  am facing some issue when i tried to add an event listener fro dbclick event in the databound method , is there a way to call a method i defined on db clicking a row from the grid (also this should be only fired depending on the row type ) 

Best Regards

[Stefan]

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.

I would share this in case someone needs it in the future:"

 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

[Len]

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

[Stefan]

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

[Len]

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
});
}

 

 

[Len]

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

I just can't remember which ones

Thanx for assisting

 

Len

[Stefan]

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

[Franklin]

Hi Stefan, 

 

What would be the syntax if I am using a funcitonal component?

[Franklin]

I think I was able to do it so please ignore my reply