How to Restrict Checkbox Selection to Only Checkbox Click in Kendo Grid Row Selection?

[Akhilesh]

Title: How to Restrict Checkbox Selection to Only Checkbox Click in Kendo Grid Row Selection?

Description:

I am using the Kendo React Data Grid with row selection enabled via a checkbox column. My goal is to select a row only when the checkbox itself is clicked, not when any other part of the row is clicked.

However, currently, when I click anywhere in the row (e.g., the staff name), the checkbox also gets selected. This creates a problem in my use case — clicking the staff name navigates to the staff profile, but it also toggles the checkbox, which is unintended.

What I need:

I want the checkbox to be selected only when the checkbox is clicked, and not when clicking anywhere else in the row.

What I've tried:

• I am using

  selectable={{

                          enabled: true,

                          mode: 'multiple',

                          drag: false,

                          cell: false,

                          checkboxOnly: true

                      }}

  but the issue still occurs.

• I have a custom cell rendering for the name column that navigates on click.

Screenshot:

Question:

How can I configure the Kendo Grid so that:

• Checkbox selection is triggered only by clicking the checkbox.

• Clicking on any other cell (especially with navigation) does not toggle checkbox selection?

Thanks in advance!

[Alexander]

Hello, Akhilesh,

While the Grid currently does not expose a `checkboxOnly` prop when configuring the GridSelectableSettings, there is a way to achieve this functionality using the Grid's existing API.

You can accomplish this by leveraging the `onSelectionChange` prop of the Grid, which handles the callback when selection changes occur. Within this callback, you can check whether the target of the synthetic event is an input HTML element (the checkbox) and only then update the state object responsible for tracking the selected rows.

I have prepared a demo that showcases this implementation, which you can view here:

• https://stackblitz.com/edit/react-dy2rzhan?file=app%2Fapp.jsx 

Hope this solves the problem. If you need any further assistance or have additional questions, please do not hesitate to reach out.

Regards,
Alexander
Progress Telerik