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

[aestradaes]

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

[aestradaes]

@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]

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

[aestradaes]

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
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]

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]

@MBilalShafi Thanks!

[michelengelen]

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]

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

[MBilalShafi]

@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]

@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?