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!
13 Answers, 1 is accepted
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
Rank 1
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
Rank 1
Rank 1
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
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
Rank 1
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
Rank 1
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
});
}
Rank 1
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
Rank 1
Hi Stefan,
What would be the syntax if I am using a funcitonal component?
Rank 1