Kendo Grid custom cell with row selection

[Matej]

Hi,

I have a Kendo Grid with a custom cell and row selection. When I add <div> to my custom cell than onRowClick is ignored. What is the proper way to enable onRowClick in my custom cell?

example https://stackblitz.com/edit/react-4v6l81

[Stefan]

Hello, Matej,

Thank you for your example.

This is expected as we have an internal check for the event target before firing the onRowClick event. This is mainly made if the user clicks inside an input or checks a checkbox.

When the cell is custom, the developer has full control over the rendering and can attach the click over the td element programmatically.

This is the updated example showcasing this:

https://stackblitz.com/edit/react-4v6l81-uujhmt?file=app/main.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Matej]

I noticed that you are passing an onSelectionChange method from a grid to a custom cell as selectionChange https://www.telerik.com/kendo-react-ui/components/grid/api/GridCellProps/#toc-selectionchange. Will any similar option be available for onRowClick in the future?

[Stefan]

Hello, Matej,

Thank you for the suggestion.

The main reason is that calling the props.onRowClick is similar to programmatically calling the handler this.handleOnRowClick.

We will have this in mind for future versions, the feedback is highly appreciated.

Regards,
Stefan
Progress Telerik

[Matej]

Hi,

can you again consider adding the onRowClick  as a GridCell prop? I have MyGrid shared component with all my select/multiselect logic there and I am passing all columns as a child to this component. Now my CustomCell does not have access to the this.onRowClick because CustomCell  is defined outside of the MyGrid component.

[Kiril]

Hello Matej,

We are looking forward at adding the `onRowClick` property for a future version of the `@progress/kendo-react-grid` package.

It is currently possible to call the `onRowClick` handler without this property, by utilising the React Context API and passing the callback through a `Context.Provider`

I have prepared the following stackblitz example, which demonstrates calling the `onRowClick` callback through the Context API, when your custom cell is defined outside of the App component:
https://stackblitz.com/edit/react-4v6l81-gngdtt

Please let me know if you need further assistance.

Regards,
Kiril
Progress Telerik

[Lenard]

And still it's not available Why don't pass the onRowClickEvent to a Custom component so we can decide on which element the onRowClick should be fired. The above answers should no be accepted since it does not work with multiselect. Kendo Grid is unusable with customCells and multi select...

[Vessy]

Hi, Lenard,

The functionality mentioned by my colleague Kiril was postponed due to the low demand for it.  I have also logged a public issue for such enhancement in the link below, so the KendoReact developers will review it for implementation again:

• https://github.com/telerik/kendo-react/issues/1416

In addition, I have also tested the suggested in this thread approach (using the React Context to handle the click event of the cell) and it worked properly at my end for MultiSelect as well. Can you elaborate a bit on the exact scenario in which you are trying to use it when the click is not propagated properly even when the React Context is used? It will be really helpful if you can send us a Stackblitz sample where we can examine the exact setup leading to the issue and try to suggest you a way to fix it.

[Lenard]

Thanks for the reply.

The main issue i run in is selecting multiple rows by holding shift. On normall (non custom cells) this works out of the box by using the helper function getSelectedState from @progress/kendo-react-data-tools. This function needs an event: event: TableSelectionChangeEvent<any>. The suggested way above would be to send back a dataItem in a custom callback on the custom... custom cell to the original custom cell. With this method you can select multiple cells indeed, but has different behavior to the non custom cells which calls the onSelectionChange callback on the Grid component. 

 

To summarize: The provided solution will not let me select three rows with two clicks by holding shift and differs from non custom cells implementation. 

[Vessy]

Thanks a lot for the shared feedback, Lenard. We managed to replicate the described issue and will try to create a workaround for it (if possible). If we manage to come up with a suitable solution, I will write a follow up to this reply with it.

[Vessy]

Hi, Lenard,

We created a sample where all functions of the default Grid cell are available in the custom cell as well. Basically, what we did was to copy the default Grid cell logic into the custom cell, so it can have all information needed for the click/select/etc. events. You can access the prepared sample here:
https://stackblitz.com/edit/react-rdkuof-nxajax?file=app%2Fmain.tsx

I hope that it will be helpful.

[Lenard]

Sorry for the delayed response, meanwhile i was working on other stuff. But the problem is still there, so thanks for the effort!  This seems like a solution i can work with. Although i like to follow it up with another question. Since basically all our cells are custom cells, my preferred way would be to implement that event on the: GridProps.rowRender. Is this possible? If it's not i can use the Default Grid code solution, but a single event would make my life a little bit easier :D

[Vessy]

Hi, Lenard, no I am afraid that the `rowRender` is not suitable for a workaround for the custom cells selection problem. Still I am really glad the suggested approach is working for you!

[Matej]

Awesome, Thank you!