Conditional Grid Detail button

[Bernd]

Hi.

I am trying to only show the detail (+) button in a grid row if a field has a specific value but I can't make it work. Here is an example:

https://stackblitz.com/edit/react-skjcz7?file=app%2Fmain.tsx

As you can see, the + button in the first row does not get replaced by my new button and also if I click on my button it results in an error.

I found a quite old example from a similar thread here but it was build with a class based component. I tried to do this with my function based approach but obviously I'm missing something.

Thanks for your help!

Greetings,

Bernd

[Konstantin Dikov]

Hello Bernd,

Thank you for reaching out to us.

The desired result can be achieved by handling the "cellRender" of the Grid and conditionally remove the content of the expand/collapse cell per data item. Here is an example demonstrating such implementation:

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

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Jie]

How to achieve this in v11.3.1? where both cellRender and expandField properties have been removed from Grid properties.

[Bernd]

I think you can achieve this now using the cells and the detail properties of the Grid. See here:

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

 

[Alexander]

Hi, Jie,

In version 11.0.0, the following changes took place:

• expandedField has been removed in favour of the detailExpand state property.
• cellRender has been removed in favour of the `cells` prop.

You can read more about the breaking changes introduced with version 11 in the following article:

• https://www.telerik.com/kendo-react-ui/components/updates/breaking-changes/11-0-0 

You can use cells.hierarchyCell instead of cellRender to provide custom rendering for the cells in the expand column. You can read more about custom hierarchy cells and the new cells property in the following article from our documentation: 

• https://www.telerik.com/kendo-react-ui/components/grid/cells/hierarchy-cells

The `detailExpand` prop receives an object with a key - the dataItemKey of the row, and a boolean value that sets the expanded state of the row.

For convenience, I prepared an example to showcase the described approach, where I prevent a certain row from being able to render the expand icon based on its ID - in this case, the product with ID 3. You can check it out here:

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

I hope this helps. If additional questions arise, please do not hesitate to ask. I will be happy to help.

Regards,
Alexander
Progress Telerik

[Jie]

Alexander, it works. Thanks!