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

[Luis-Ramirez21x]

The problem in depth

I'd like the grid to auto-add a new row with a random ID only when:

• a user adds a new row and then saves it to a db/server.

It should not auto-add a new row when a row is edited. The new row should be autofocused on as well.

Use case:
Our users often have to perform a lot of data entry. If they could simply hit enter, and the current row would save and the next one would open that would be fantastic.
Currently users have to :
-input data
-hit enter
-tab to the add button
-hit enter again

Ideally users just:
-input data
-hit enter

Am I overlooking some event listener that's triggered after proccessRowUpdate?
Thanks in advance!

I've created a simplified sandbox from a combination of the Server Side example and the Full CRUD example

This is what their flow currently looks like

adding_row_improvement.mp4

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 18.19.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.60
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base: ^5.0.0-beta.34 => 5.0.0-beta.34 
    @mui/core-downloads-tracker:  5.14.14 
    @mui/icons-material: ^5.11.11 => 5.11.11 
    @mui/joy: ^5.0.0-beta.11 => 5.0.0-beta.11 
    @mui/lab: ^5.0.0-alpha.126 => 5.0.0-alpha.126 
    @mui/material: ^5.11.12 => 5.11.12 
    @mui/private-theming:  5.14.14 
    @mui/styled-engine:  5.14.14 
    @mui/system:  5.14.14 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.7 
    @mui/x-charts: ^6.0.0-alpha.15 => 6.0.0-alpha.15 
    @mui/x-data-grid:  6.6.0 
    @mui/x-data-grid-generator: ^6.6.0 => 6.6.0 
    @mui/x-data-grid-premium:  6.6.0 
    @mui/x-data-grid-pro: ^6.19.1 => 6.19.1 
    @mui/x-date-pickers:  6.16.2 
    @mui/x-date-pickers-pro: ^6.16.2 => 6.16.2 
    @mui/x-license-pro: ^6.6.0 => 6.6.0 
    @types/react:  18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.9.5 

Search keywords: Auto add row, processRowUpdate,
Order ID: 67382

[michelengelen]

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?

[Luis-Ramirez21x]

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

[michelengelen]

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

[cherniavskii]

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

Screen.Recording.2024-05-15.at.17.26.21.mov

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

[Luis-Ramirez21x]

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

working_demo.mp4

[Luis-Ramirez21x]

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

[Luis-Ramirez21x]

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:

focus_flicker.mp4

[Luis-Ramirez21x]

Here's a simplified sandbox of the above

[michelengelen]

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?

[Luis-Ramirez21x]

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!

[michelengelen]

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?

[romgrk]

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.

[Luis-Ramirez21x]

@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 👍 !

[Luis-Ramirez21x]

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

[romgrk]

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.

[github-actions]

⚠️ 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.

[Luis-Ramirez21x]

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?

[Luis-Ramirez21x]

i'll close and reopen in a sperate issue

[github-actions]

⚠️ 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.