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

[Matej]

Awesome, Thank you!