[data grid] Editable Cell Tabbing

[Zasheus]

The problem in depth

I am currently using DataGrid for CRUD with the single click edit recipe. I need the edit mode to be "cell" as I fill in non editable cells with data on an edit cell commit. However, I want the user to be able to tab from one editable cell to another, like how "row" edit mode works. Ideally when it is the last cell it should go to the next row to.

Whats the best option to do this? Thanks

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Focus, Tab
Order ID: 75414

[michelengelen]

I am not sure I do understand you requirement.
From what I understood setting the editMode to 'row' would be what you want.
If you need 'non-editable' cells you can just disable that in the column definitions, or by using the isCellEditable method. That one is highly customizable to fit your specific needs as well.

Exmaple:

const isCellEditable = (params: GridCellParams) => {
  if (params.field === 'age' && params.value < 25) {
    return false;
  }
  return true;
};

[Zasheus]

Essentially I have a cell where I can enter a code, and from that code I fetch data and set column data onProcessRowUpdate. This works as I expect since it’s in cell edit mode. However, in row edit mode, the fetch data will only populate once I exit out of editing the WHOLE row, rather than that specific cell.

So if I were to be able to get the tabbing functionality of row edit mode, but all the processes handle the same way as cell edit mode, this would be ideal.

[michelengelen]

Oh, that's an interesting use case. @romgrk is it possible to update cell values "mid-edit"?

[romgrk]

I don't think so, that's a new feature or change we'd need to make.

How about we add a processCellUpdate callback to complement processRowUpdate?

@mui/xgrid Thoughts?

[michelengelen]

Sounds like a good idea, but how can that help with this specific use case?
He would still need to exit edit mode, update and then re-enter edit mode if i understood that correctly

[cherniavskii]

Hi @Zasheus
I've forked and modified the single-click editing demo: https://stackblitz.com/edit/react-u9chwq?file=Demo.tsx
Is this the behavior you're looking for?

[Zasheus]

Hey @cherniavskii, thanks a lot for that. I managed to get the implementation I wanted through the help of your demo. Let me know if there's a more elegant solution to this though 😂 https://stackblitz.com/edit/react-u9chwq-ypaysx?file=Demo.tsx

[cherniavskii]

@Zasheus Looks good to me!
While it's quite verbose, I don't have a more elegant solution, unfortunately.

[michelengelen]

Thanks @cherniavskii for the confirmation. Since this seems resolved I will close the issue now. @Zasheus feel free to reopen if you encounter any problems with the solution! Thanks!

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @Zasheus?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.