Double click and multiselect

[Giovanni]

Hi, I'm trying to combine many functionality on kendo react data grid.

I want to allow multiselect, custom cell, custom menu filter, contextual menu and double click managing.

I tried like in following project:

https://stackblitz.com/edit/react-tcu25m

 

I started from following examples:

https://stackblitz.com/edit/react-7mz85d (double click managing)

https://stackblitz.com/edit/react-fx9xkl (multiselect)

But, combining the 2 way the double click fires only sometimes. Maybe because the click was consumed by selection?

How can I get all my needs?

[Konstantin Dikov]

Hello Giovanni,

Your assumption is correct and the issue is due to the selection functionality, which after the first click changes the selected state, thus forcing the row to be rendered with the new state. This means that when the row is clicked second time (for the double click), the previous element in the DOM will already be gone and only the click event for the new element will fire.

What I could suggest is to enable the selection only through the checkbox, which will allow you to have a double click handler as well:

• https://stackblitz.com/edit/react-yaqspd?file=src%2FJAGrid.jsx,src%2Frenderers.jsx

Please note that I have removed the preventDefault from the onClick in the rowRender, because it interferes with the checkbox selection.

As a side note, for allowing the double click and the click to select, you might consider adding a double click handler for the wrapping element of the Grid (or some other wrapping element that will have the rows as children elements and will not be re-rendered after a single click).

 

Regards,
Konstantin Dikov
Progress Telerik

[Giovanni]

Hi, thanks for your reply.

We're porting our existing app (made with JQuery and Kendo for JQuery) to KendoReact, and unfortunately we'd absolutely need to replicate the same exact behavior in the new one. We'd need to have click for selection, multiselection with the checkboxes and doubleclick support at the same time, for custom and regular cells.

I've noticed it does work perfectly if I have a custom cell without nested DIVs, just

<td> someCustomString </td>

With the above, all selection, multiselection and doubleclick work flawlessly.

 

Sorry but I do not understand what you mean in your side note. Could you please provide an example - editing your previous one or mine, if you like? Would it allow support for all the three features I need at the same time?

[Konstantin Dikov]

Hello  Giovanni,

While playing around with the scenario I came up with a different way for handling the re-mounting of the row on selection. Since the row is rendered again on selection, if we wrap the selection logic in a setTimeout function, this will give the double-click time to fire before the row is re-rendered. I have modified the example, so it can handle both events:

• https://stackblitz.com/edit/react-r3lvux?file=src%2FJAGrid.jsx

The setTimeout is placed within the onSelectionChange event. I have also included logic for removing the timeout if the checkbox is clicked, so that it does not introduce a delay for the checkbox selection.

Hope this helps.