[data grid] Row Editing with server-side validation guidance

[KenyattaHill]

The problem in depth

Our questions are primarily focused around editing data and interacting with a server to do validations.

We have read through the docs and found the example for server-side validation via processRowUpdate and onProcessRowUpdateError props.

The example in MUI shows errors via snack bar but does not show examples of highlighting specific column.
Is it possible to use the errors from a server response to update the grid state or edit cell props to put specific columns in an error state?

For example –
Suppose we have a table with the columns Product Name, List Price, Cost and Quantity. The List Price and Quantity columns are editable in row mode. When a row is edited and both editable columns fail server-side validation, we would like to highlight each editable
cell and display a tooltip with their respective error messages in the corresponding editable cell.

We appreciate your time and advisement.

Your environment

`npx @mui/envinfo`

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.7.0 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (131.0.2903.70)
npmPackages:
@emotion/react: ^11.11.1 => 11.13.5
@emotion/styled: ^11.11.0 => 11.13.5
@mui/base: ^5.0.0-beta.26 => 5.0.0-beta.62
@mui/icons-material: ^5.14.19 => 5.16.7
@mui/material: ^5.15.15 => 5.16.7
@mui/styled-engine: ^5.14.20 => 5.16.6
@mui/system: ^5.14.20 => 5.16.7
@mui/x-data-grid: ^7.3.0 => 7.22.3
@mui/x-data-grid-premium: ^7.3.0 => 7.22.3
@mui/x-data-grid-pro: ^7.3.0 => 7.22.3
@types/react: 18.2.42 => 18.2.42
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.2.2 => 5.2.2

Search keywords: data-grid editing validation

Order ID: 89406

[michelengelen]

Hey @KenyattaHill ... this is a very interesting use-case and I think we could probably improve this internally as well, but for now here is a workaround that does what you are trying to achieve.

You can also change the behavior of the callback to also show tooltips when entering the error state for the cells.

Here is the DEMO
Would that work for you?

[KenyattaHill]

That you @michelengelen for your quick response. Unfortunately the demo you provided essentially mimics the example in the documentation and we are still unsure of the approach we should take to highlight cells that have failed validation and provide the message in a tooltip. Similar to the example in the docs that uses preProcessEditCellProps to display a tooltip.

We cannot use that approach for our server side validation use case. We would like some way to use server-side validation during processRowUpdate and show the edit cells in an error state when validation fails. Is this even possible?

You can also change the behavior of the callback to also show tooltips when entering the error state for the cells.

Can you elaborate on this please?

[michelengelen]

Hey @KenyattaHill ... sry for the misinformation. Sometimes codesandbox does not update the link accordingly in the "Share" overlay and I did link the wrong one.

Here is the correct link: DEMO

Let me know if that works.