Devextreme-reactive: How to Expand Detail Row on Row Click

[hawekotte]

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Description

I would like to be able to expand a detail row when the corresponding row is clicked (rather than only being able to click the toggle icon on the left).

I am currently capturing which row was clicked using the Table rowComponent onClick handler. Though I am now unsure of how to make use of this information. I presume it can use toggleDetailRowExpanded but I am unsure of how to implement this (as this issue is closed and doesn't quite fit my needs). Cheers!

[MaximKudriavtsev]

Hi @hawekotte,

To achieve this behavior, you should use the controlled mode and as you correctly mentioned, override the table row component. The next example demonstrates how to do it.

[hawekotte]

Thanks for the reply @MaximKudriavtsev! I've taken a look at the provided example and read the docs, but the implementation still isn't working. I am using a functional component but that should not be a big problem as the controlled mode example uses such.

To better help diagnose the issue I have set up a minimal recreation of the issue here. Let me know what other information is needed, and again thank you very much for all of the help! 😄

[MaximKudriavtsev]

@hawekotte,

In controlled mode, you should use properties without the default prefix because these properties apply only for initial component rendering.

I’ve updated your example and now it works fine.

[hawekotte]

How could I miss that? Thanks a ton!

[MaximKudriavtsev]

You are welcome!

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.