Hi, I need to build a grid with single selection.
I started by the example on https://www.telerik.com/kendo-react-ui/components/grid/selection/
So, I noticed that if the grid has the single selection mode, when a row is selected I cannot unselect it: I can only select another row.
I would like to obtain this: when I click on a row it will be selected if is unselected, and it will be unselected if is selected.
This is my custom solution:
https://stackblitz.com/edit/react-mbwdnz?file=app%2Fmain.jsx
So, is there a better way to obtain the same?
Thank you
1 Answer, 1 is accepted
Hi Giovanni,
Thanks a lot for sharing your solution with the community! If you will to simplify the used implementation, you can directly compare the `selectedState` and `newSelectedState` arrays and update the state only in current selection is different.
You can see a sample demonstrating such approach here:
https://stackblitz.com/edit/react-jd63mt?file=app%2Fmain.jsx
Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Iron
Thank you for your suggestion.
But now, I tried to use a custom cell.
I've noticed that a custom cell works well in grid selection only by adding following code:
https://stackblitz.com/edit/react-mbwdnz-4ypxfr?file=app%2Fmain.jsx
As you can see, by clicking in the CustomCellOK the selection/unselection works, while doesn't work on CustomCellFail.Unfortunately, the onRowClick and onRowDoubleClick events works well on CustomCellFail and doesn't work on CustomCellOK!
So, how can I create a custom cell where even selection and onRowClick can work fine?
Thank you.
Hello, Giovanni,
There is an internal check for the event target before firing the onRowClick event.
This is implemented in case 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.
Here is an example that showcases this approach:
https://stackblitz.com/edit/react-4v6l81-z9h7cm?file=app/main.jsx
the onClick handler is attached inside of the td element in the custom cell.
Regards,
Filip