Unselecting on a single selection grid

[Giovanni]

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

[Vessy]

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

[Giovanni]

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:

{...{

    [GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,

}}

 

You can see my new example here:

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.

[Filip]

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