[question] Editing Multiple DataGrid rows freezes the UI

[dpavloff]

Order ID or Support key 💳 (optional)

47032

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Hi!

I'm having a problem in using DataGridPro. I wish to change cell values for multiple rows from the modal window.

The way I'm doing that is by using apiRef.current.startCellEditMode, apiRef.current.setEditCellValue and apiRef.current.stopCellEditMode.

Basically, running through multiple rows work, but it freezes the UI when this operation happens, since DataGrid will have to enter, edit and exit edit mode for multiple rows.

I've created a Sandbox that shows my problem: https://codesandbox.io/s/datagrid-editing-multiple-rows-8bvcq1?file=/demo.tsx

Note: in my datagrid component, the cell that I'm trying to edit has custom components for edit and view modes, so re-rendering that probably takes a toll on perfomance.

Basically, my question is How do I edit multiple Datagrid cells in sequence without hurting perfomance?

Your environment 🌎

`npx @mui/envinfo`

``` Browser: Firefox System: OS: macOS 12.2.1 Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm Browsers: Chrome: 111.0.5563.64 Edge: Not Found Firefox: 110.0 Safari: 15.3 npmPackages: @emotion/react: ^11.9.3 => 11.10.5 @emotion/styled: ^11.9.3 => 11.10.5 @mui/base: 5.0.0-alpha.112 @mui/core-downloads-tracker: 5.11.2 @mui/icons-material: ^5.8.4 => 5.11.0 @mui/material: ^5.9.1 => 5.11.2 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.2 @mui/types: 7.2.3 @mui/utils: 5.11.2 @mui/x-data-grid: 5.17.17 @mui/x-data-grid-pro: ^5.17.0 => 5.17.17 @mui/x-license-pro: ^5.15.0 => 5.17.12 @types/react: ^18.0.15 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.5 => 5.3.6 typescript: ^4.9.4 => 4.9.4 ```

[m4theushw]

Looking at the example given, since you already have the new value you want to put in the cell, you could use apiRef.current.updateRows and not the editing API. Does it work for you?

Calling an API method after another one (e.g. startCellEditMode and setEditCellValue) doesn't work as expected because React needs to re-render between them.

[dpavloff]

Oh that works perfectly, thanks @m4theushw!

While we're here, is there a similar way to expand/ collapse multiple rows without going through the rows one by one?

If I should put it in a separate ticket, please let me know.

[m4theushw]

If by "expand / collapse" you mean the master/detail, then you can use the detailPanelExpandedRowIds prop to control which row should be expanded or not.

[dpavloff]

I was actually talking about grouping with treeData. Right now we have a button "expand/ collapse", that goes through all rows, checks their expansion state, and if it's needed, expands this row with apiRef.current.setRowChildrenExpansion().

[dpavloff]

One more thing - I just realised that the updateRows doesn't trigger the processRowUpdate callback, which I use for watching over the updated values in the datagrid. Is there an alternative callback for updateRows?