search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[data grid] Allow to disable editable row during server side synchronization #13189

Open aestradaes opened 5 months ago

aestradaes commented 5 months ago

The problem in depth

When a user is editing a row and they want to submit the change. We would like to let the user know that the form submission is busy and we think that they should be no longer be able to edit the cell/row.

Your environment

`npx @mui/envinfo` ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ``` Using Chrome System: OS: macOS 14.4.1 Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm pnpm: Not Found Browsers: Chrome: 125.0.6422.61 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.5 @mui/base: 5.0.0-beta.44 @mui/core-downloads-tracker: 5.15.17 @mui/icons-material: 5.15.17 => 5.15.17 @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: 5.15.17 => 5.15.17 @mui/material-nextjs: 5.15.11 => 5.15.11 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: 7.4.0 @mui/x-data-grid-pro: 7.4.0 => 7.4.0 @mui/x-date-pickers: 7.4.0 => 7.4.0 @mui/x-license: 7.2.0 => 7.2.0 @types/react: 18.3.2 => 18.3.2 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.4.5 => 5.4.5

Search keywords: Row Order ID: 78538

michelengelen commented 5 months ago

This is something that can be done with the processRowUpdate method. Here are the docs for that: The processRowUpdate method

I am not sure though what your exact needs are. Could you elaborate a bit on what you want to achieve?

michelengelen commented 5 months ago

Ideally we would like to see a live code example to work with. 👍🏼

aestradaes commented 5 months ago

@michelengelen

Hey thanks for your response! We do use processRowUpdate in our data grid, but are unable to use it how we want.

I made a live code example here. Ive made it so the request take a while to save so its easier to test.

So what I want to happen is when a user makes a change to Name and they press Enter (or click out of the cell) to save. I want the entire row to be completely disabled for editing.

In my live code example if you choose a row:

  1. Change Name
  2. Press Enter
  3. You can still edit Country (and save by pressing enter) within the same row

Now we have 2 Post calls waiting. Which we don't want. Hopefully this example is better, thanks!

michelengelen commented 4 months ago

@MBilalShafi This is an interesting use case ... could you assist here?

aestradaes commented 4 months ago

This is one of the solutions I tried (I used redux in our application to keep track of the current id being edited to test the concept). But if you follow the steps above or try re-editing the same cell by spamming enter it breaks (sometimes). Heres a screenshot of the error with this solution I tried Test Cell Editable Fail It crashes the page. Thats why I think it would be nice to be able to disable the row (and grey the row out as an indicator) right after they press enter/click out the row to save their changes.

MBilalShafi commented 4 months ago

@aestradaes Have you already tried using the loading prop to prevent users from updating rows during the API call? One drawback could be that it will block the rest of the rows during the update too.

aestradaes commented 4 months ago

@MBilalShafi I have tried that, but it blocks the rest of the rows like you said. For me in line row editing is basically some sort of a form. And like other forms, when you submit I would like to grey the inputs until the post is finished. Unfortunately it seems there isn't an easy way to do what I am asking. Would this be more in line with a feature request?

MBilalShafi commented 4 months ago

Would this be more in line with a feature request?

I'd say yes. There doesn't seem to be an easy way to achieve your use case out of the box.

To me, this makes sense along with the data source implementation around the edit feature, but it could also be done separately since it corresponds to the server-side synchronization part of the row editing.

Until we pick this up, I'll add a Waiting for upvotes 👍 label to see demand for it in the community. Feel free to add an upvote on the issue description.

aestradaes commented 4 months ago

@MBilalShafi Thanks!