[data grid] Please add edit example for treedata

[entaildevops]

Related page

https://mui.com/x/react-data-grid/tree-data/

Kind of issue

Missing information

Issue description

It is currently quite unclear how row editing should be accomplished properly with treedata. If you the full featured crud example is modified to use treedata, the editing works - BUT: every edit causes the row to collapse, which is very bad UX. The collapsing occurs because the example uses processRowUpdate to handle updates. As stated here apiref.current.updateRows() would not cause this. But with a lack of example, it is a bit hard to get grasp on how to do it.

The Full example of treedata should have example also on how to properly edit the rows with decent UX when treedata is present.

Context

No response

Search keywords: treedata

[michelengelen]

Hey @entaildevops ... That's a good request.
I'll add this to our umbrella issue to add recipes for specific use cases.
Thanks for raising this.

The normal editing feature works though, so what exactly are you trying to accomplish? If you can explain your use case we might be able to help you with it.

[entaildevops]

Good to hear that you´re going to create more examples, @michelengelen!

However, I was able to solve the problem with collapsing rows: the problem was me using setRows() to update all rows within processRowUpdate, which caused the rows collapsing (just as the docs imply). The solution was to use apiRef.current.updateRows() to update only affected rows instead.

Still, it would be helpful if the treedata example would include editing capabilities.