[question] DataGridPro Expand and Collapse All nodes programmatically

[sbmaggarwal]

Order ID or Support key 💳 (optional)

71425

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

How can I make all rows expand/collapse programmatically in MUI ReactJS DataGrid?

What have I tried?
I used prop defaultGroupingExpansionDepth based on MUI documentation:

export const EXPAND_ALL = -1;
export const COLLAPSE_ALL = 0;
...
const [expandedState, setExpandedState] = useState(COLLAPSE_ALL);
...

return <Stack>
        <Stack spacing={2} direction="row" m={1}>
            <Button variant={"contained"} onClick={() => setExpandedState(EXPAND_ALL)}>Expand All</Button>
            <Button variant={"contained"} onClick={() => setExpandedState(COLLAPSE_ALL)}>Collapse All</Button>
        </Stack>
        <DataGridPro
            treeData
            ...
            apiRef={dataGridApi}
            defaultGroupingExpansionDepth={expandedState}
            ... />
    </Stack>;

But the problem is that these buttons only work when tree is not already partially expanded.

As soon as I partially expand the tree grid, these buttons don't work any more. How can I make these buttons work irrespective of the current expansion/collapse state of the tree grid?

Your environment 🌎

`npx @mui/envinfo`

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

[romgrk]

Have you read that section of the documentation in full? The last part seems to be what you're looking for:

If a prop start by default... it usually only applies when the component is mounted, just like defaultValue for input.

[sbmaggarwal]

But I don't want to expand a single row, I want to expand and collapse all rows. Is there a direct way to do this?

[romgrk]

Duplicate of #8505