[data grid] Is it possible to have tree data row children open and under that details panel?

[bojanmitic]

The problem in depth

On some rows we would like to show both, tree data child rows and underneath detail panel with some more data. Those are working well independently, but as I try to trigger both at the same time I noticed that detail panel overrides and set somehow childrenExpanded to false and I can see only detail panel. Is it possible to have both open.

here is code that triggers those, as I said they work well independently, even if I set children expansion to be true always, that get override somehow

onClick={() => { (params as any).api.setRowChildrenExpansion(params.row.id, true); isPanelExpanded ? setDetailPanelIds(filterOutId) : setDetailPanelIds(addId); }}

And this is what I would like:

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: tree data together with details panel
Order ID: 69131

[michelengelen]

Hi @bojanmitic,

do you want to open the detail panels for all children at the same time?
Or should they behave like default?

[bojanmitic]

No, I would like to open all row children and one detail panel for that row. LIke in a photo, there is row then two children that are tree data, and under that details panel.

[michelengelen]

Ah, so the parent row has a detail and children and you want to open the children tree and the detail panel as well. Gotcha!

Let me look if this is possible ... It feels like it should! Stay tuned!

[MBilalShafi]

@bojanmitic Is this similar to something you are trying to achieve: https://stackblitz.com/edit/react-mhffnh?file=Demo.tsx ?
You can open both the tree data cells and master-detail panel as well for both group rows and leaf rows.

[bojanmitic]

Hi @MBilalShafi,

Thank you for your answer. It is similar to what I would like, the only difference is that I would like to open both, tree data children and detail panel with one button( one click). And I would like child rows to come first and then details panel. Is that possible? BTW I have only one level of children and panel is only for parent row, children don't have panel, please check photo in the description for more details.

[michelengelen]

Hey @bojanmitic I did play around a bit with the demo provided by @MBilalShafi as well and could manage to reach a bit more feature parity. The only thing I could not manage to achieve is the rendering order you need. The detail panel will always come first and the children rows will come after that. I am not sure if this is even possible to do.

Here is my example.

Would that fit your needs?

@cherniavskii would you have any idea if we can manage to restructure this?

[bojanmitic]

Hi @michelengelen thank you for your answer,

This seems pretty close to what I need, except as you said order of child rows and detail panel.
I guess this will be the answer, thanks again :)

[michelengelen]

Hey @bojanmitic ... I am sorry that I couldn't help you any further.
Let's wait on @cherniavskii if he has an idea. Maybe he can come up with something!

[cherniavskii]

Hmm, I don't think it's possible to support this use case without changes in the Data Grid.
To support this, we'll need to add an option for configuring the detail panel position (top or bottom).

I'm adding the waiting for upvotes label to this issue to see whether it's a popular use case.