Kendo Grid (React) - conditionally disable selectable rows

[Krzysztof]

Hello all,

I'm trying to implement a functionality which relies on Kendo Grid (React + Typescript) with selectable rows (with checkbox) as in the second example in the docs:

https://www.telerik.com/kendo-react-ui/components/grid/selection/

Is there any way (based on that example) to make the rows conditionally disabled? Say I click one of the rows which does two things:

• sets some filtering state (not a problem),
• based on this state I make it impossible to select another row. They should become disabled, and greyed out (struggling to achieve this)

What I tried to do was removing pointerEvents by setting them to none, but this one unfortunately also removed the tooltip that should be attached to each row explaining why it's been disabled.

I also tried to override Grid's onRowClick event by:

onRowClick={()=>{}}

but this didn't prevent the row from being selectable.

 

Any help much appreciated,

Krzysztof

[Konstantin Dikov]

Hello Krzysztof,

Thank you for reaching out to us.

The select functionality of the Grid is handled manually by changing the select field value in the underlying data item, which mean that if you want to prevent the selection for particular rows, you can achieve this within the logic that updates the selected state.

As for disabling the checkboxes for particular rows conditionally, you can render disabled checkbox within the "cellRender" of the Grid based on some condition within the data item. Following is a simple example demonstrating such implementation:

• https://stackblitz.com/edit/react-uyp5e4-d5zkdk?file=app%2Fmain.jsx

Note that the same logic for disabling the rows is included in the "select all" logic in the header.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Krzysztof]

Thank you for the answer. Looks like this is what we're looking for.