KendoReact Grid OnRowDoubleClick for custom cell component

1 Answer 59 Views
Grid Wrappers for React
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Andrei asked on 18 Oct 2021, 08:28 AM | edited on 18 Oct 2021, 08:35 AM

Hello, i am using KendoReact Grid component, for one column i use custom component for cell, for some reason OnRowDoubleClick event doesn't fire when i double click on this cell, fot other cells double click is working fine, what am i doing wrong? is there a way to make it work?

 

event doesn't fire when you click on span element(blue on screen), but when you click on cell padding(green on screen) it does fire

it looks like i need to pass the event on span element, but i dont know which one since only event that comes through props is onChange

1 Answer, 1 is accepted

Sort by
0
Accepted
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
answered on 18 Oct 2021, 08:39 AM
if you have no other events attached to parent span you can add pointer-event:none option in css to it to prevent span from blocking events on td
Stefan
Telerik team
commented on 18 Oct 2021, 09:17 AM

Hello, Andrei,

In general, the event has to be fired as expected unless there is a custom logic that is preventing it from the styles or the JavaScript:

https://stackblitz.com/edit/react-ffsxos?file=app/main.jsx
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 18 Oct 2021, 10:31 AM | edited

try double click on the text in last column
https://stackblitz.com/edit/react-ffsxos-mmzb8i?file=app/main.jsx
Stefan
Telerik team
commented on 18 Oct 2021, 12:17 PM

Yes, in this case, this occurs as we have an internal check if the element is a TD:

 if (this.props.onRowDoubleClick && (e.target as any).nodeName === 'TD') {

We have this check because if the custom cell has a button we do not want to fire that event when the user double clicks the button.

In this case, we can suggest the developer to attach its own onDoubleClick over the TD and call the same logic.

The approach that you have suggested is also valid.

Tags
Grid Wrappers for React
Asked by
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or