This is a migrated thread and some comments may be shown as answers.

Kendo React Grid: Double click and right click menu

13 Answers 358 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 26 Oct 2018, 09:25 PM

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

Sort by
0
Stefan
Telerik team
answered on 29 Oct 2018, 08:27 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Binyam
Top achievements
Rank 1
answered on 06 Mar 2019, 08:20 AM
Is it possible to access props passed from another component?
0
Stefan
Telerik team
answered on 06 Mar 2019, 10:06 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Binyam
Top achievements
Rank 1
answered on 06 Mar 2019, 11:01 AM
Thank you
0
Heythem
Top achievements
Rank 1
answered on 25 Oct 2019, 03:33 PM
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
0
Stefan
Telerik team
answered on 29 Oct 2019, 06:18 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Len
Top achievements
Rank 1
answered on 18 Feb 2020, 06:07 AM

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

0
Stefan
Telerik team
answered on 18 Feb 2020, 07:47 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Len
Top achievements
Rank 1
answered on 18 Feb 2020, 08:13 AM

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


 

 

0
Len
Top achievements
Rank 1
answered on 18 Feb 2020, 08:16 AM

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

I just can't remember which ones

Thanx for assisting

 

Len

0
Stefan
Telerik team
answered on 19 Feb 2020, 07:34 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Franklin
Top achievements
Rank 1
answered on 08 Mar 2021, 10:33 PM

Hi Stefan, 

 

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

0
Franklin
Top achievements
Rank 1
answered on 08 Mar 2021, 11:28 PM
I think I was able to do it so please ignore my reply
Tags
General Discussions
Asked by
Joe
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Binyam
Top achievements
Rank 1
Heythem
Top achievements
Rank 1
Len
Top achievements
Rank 1
Franklin
Top achievements
Rank 1
Share this question
or