[data grid] Allow to change to expansion status of several groups at once

[tielushko]

Order ID 💳

31986

The problem in depth 🔍

Hello!

I am trying to have the Tree Data Grid component where the user can select from the dropdown list the level of expansion of the tree data. Maybe I am missing something, but I noticed that there is no option for me to set through API ref which rows I want to have expanded.

Is there a way to do this in code. E.G. When the user has the selector where they can say "expand level 2 in the tree" through API ref I set the rows which need to be expanded.

I would appreciate your support!

Your environment 🌎

`npx @mui/envinfo`

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

[flaviendelangle]

Hi,

You can expand / collapse one group using the apiRef.current.setRowChildrenExpansion method.
But we don't have a method to expand all groups up to a certain depth yet.

You can do it on init with props.defaultGroupingExpansionDepth (or props.isGroupExpandedByDefault if you want something more granular).
But if the row already existed on the previous tree creation, then we re-apply its expansion status to avoid inconsistencies. So changing the value of those props won't work for you.

[tielushko]

And my sort of follow up question was whether it is possible to export the state of expansion that the grid is in and reapply it during the next user session?

[flaviendelangle]

The extension status of a group is not controllable.
For you can't use apiRef.current.exportState for instance.

But you could:

1. When the expansion status of a row changes, create a lookup with the row id for the keys and the expansion status for values
2. When the grid is created, pass a isGroupExpandedByDefault prop that uses this lookup to determine if the row should be expanded

I did a basic implementation https://codesandbox.io/s/data-grid-pro-forked-dtzcmo?file=/src/App.tsx

[tielushko]

This is very helpful! I will try doing it this way! Thanks @flaviendelangle!

[tielushko]

@flaviendelangle, is the a plan to make the props.defaultGroupingExpansionDepth controllable at one point? It would be a very useful feature for toggling which nesting we want to display.

[flaviendelangle]

What would then be the expected behavior ?
If defaultGroupingExpansionDepth changes then close all the depth superior and open all the depth inferior to the new prop value ?

[tielushko]

@flaviendelangle, sorry for getting back to you late. Yes, I would imagine it would be the sort of behavior expected.

I know you can pass a prop that would have defaultGroupingExpansion depth to determine which level is expanded on the initial render. However, I would like this prop to be controlled.

I was able to mimic behavior with the setRowChildrenExpansion method on the api in a way you are describing.

[sterlingdcs-damian]

we really really need this.