[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.

[michelengelen]

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.

Glad to hear that you could fix it on your own. I would have been able to point you to that as well if you had provided a reproduction example :P

I'll keep that in mind for the next time.

@mui/xgrid should we maybe encourage the use of updateRows instead of rows in state in the recipes more? Feels like this comes up every now and then!

[entaildevops]

@mui/xgrid should we maybe encourage the use of updateRows instead of rows in state in the recipes more? Feels like this comes up every now and then!

I agree. People tend to copy/paste examples and go from there, so the "correct" way should be used as much as possible. At least I had been using DataGrid for a good while before I bumped into the fact that setRows() is NOT the recommended way to update your content. Yes, the correct way is is mentioned in the docs, but it is easy to miss I guess =)