[data grid] How can I trigger a new row being added after the processRowUpdate callback? (Only after adding a new row, not editing an existing row) about mui-x HOT 17 OPEN

@Luis-Ramirez21x it should now be public ... sry for the confusion!

from mui-x.

@michelengelen Does it work for you? The focus doesn't move to the first column:

Passing fieldToFocus to startRowEditMode seems to be working: https://codesandbox.io/p/sandbox/friendly-sun-8n5ctg

from mui-x.

OK, so you get a server side id in your response, right?

I guess this should be doable still. I tried setting a constant value for the new rows id and that does work indeed, but the newly added row from the server will always be added at the bottom. Then the order is messed up.

@romgrk is there a way we can have an empty row that always sits at the last place? Or can we update the index in some way?

@Luis-Ramirez21x would row pinning be an option?

from mui-x.

I don't know what fixed it, we changed a lot in v7. Let us know if there's anything else we can do, otherwise you can close the issue.

from mui-x.

Hey @Luis-Ramirez21x
This is definitely possible.
Here is an example of what you want to accomplish: DEMO
It will need some adjustments to fit your case, but this conveys the idea behind it.

Would that be a sufficient solution for you?

@cherniavskii another candidate for a new recipe?

from mui-x.

@michelengelen Thank you for responding so quickly! I'm not able to access your demo, are you able to open up permissions on it?

from mui-x.

@michelengelen no worries, I can see the demo now.

The demo is a close solution, but I encountered an issue with mismatching IDs when creating a new row and then retrieving the updated 'valid' row id from the server.

The process issue :

1. Create a new row with a random id and empty fields
2. Make a request to the server to save in the processRowUpdate callback
3. The server responds with the saved instance (valid id and saved fields)
4. I need to replace that row but the return for processRowUpdate is expecting the row with its old random id

Your demo did point me in the right direction though. I added a few lines to process row update to get what I needed.

if (_newRow) {
        apiRef.current.updateRows([{ id: id, _action: 'delete' }]); //delete the new (random id) row
        apiRef.current.updateRows([{...response}]); //add the valid row from the server response
        handleAddRow();
        return {};
      }

Although I'm not sure if this is the most efficient way to do this. What do you think?
Here's my working demo.

from mui-x.

JK I get this error in the console for returning an empty object, any guidance?

from mui-x.

Sorry for the spammed comments. This seems to do the trick, just seems a bit slower and a visible flicker of the focused cell is seen.

if (_newRow) {
        apiRef.current.updateRows([{...response}]); //add the valid row from the server response
        handleAddRow();
        return {...oldItem, _action: 'delete'};
      }

Demo of focused cell flicker:

from mui-x.

Here's a simplified sandbox of the above

from mui-x.

Sorry for the spammed comments. This seems to do the trick, just seems a bit slower and a visible flicker of the focused cell is seen.

if (_newRow) {
        apiRef.current.updateRows([{...response}]); //add the valid row from the server response
        handleAddRow();
        return {...oldItem, _action: 'delete'};
      }

This is strange. Could you compare response and updatedRow (the first param of the processRowUpdate). The only explanation would be that the id is not set when receiving it from the server.

I just noticed that you are trying to call apiRef.current.updateRows([{...response}]);. This will get called when returning the new row from processRowUpdate anyways, so just returning the response should do the trick. The problem is most likely that you are adding return {}; and the grid then tries to update with an empty object (with no id)

Could you check that please?

from mui-x.

Hey @michelengelen!

The following are console.log(apiRef.current.getSortedRows()) of

1. When adding a new row and it's in editing-state
2. After saving the row with your suggested implementation.

The id looks to be set.
But returning just the response in processRowUpdate which calls .updateRows()' just adds the row because the ids are different as per the docs.

So what happens is:

1. The original new row is kept
2. The server response row is added
3. The extra intended new rew is also added.

I say all this to say that the previous code snippet provided seemed to do the trick. Now I just have to figure out what's affecting the focus state. I think this issue is good to close.

Thanks for taking the time to help!
You guys are doing great work and I'm very excited to use the Server Side DataGrid!

from mui-x.

I have tried the simplified sandbox linked above and I can't reproduce the flicker in the video. If you need further assistance, would it be possible to reproduce the issue in the sandbox?

I'm not sure if there is a way to always have an empty row at the bottom, but it should be possible to remove/add it in the same operation as the new server row is received, which should get rid of the flicker I think.

from mui-x.

@romgrk
Looks like the flickering issue was fixed in an update. I was on @mui/x-data-grid-pro: 6.19.1
and updated to @mui/x-data-grid-pro: 7.4.0

That fixed the flicker issues I was having. It's working perfectly now 👍 !

from mui-x.

If you could point me towards what that fix might've been that would be awesome, just out of curiosity 😁 .

from mui-x.

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Luis-Ramirez21x: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

from mui-x.

Hey @romgrk @michelengelen!

I need your guidance once again. Turns out the flicker is still occurring.
The issue seems to occur when I add the autoHeight prop to the DataGrid.

See this updated demo .
Simply add a row and you'll notice the first row flicker. How can I get rid of this if I need to have all rows displayed?

from mui-x.