[question] How to Customize Functionality and Appearance of Editable DataGrid Cell?

[conerye]

Order ID or Support key 💳 (optional)

331993142

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I have a table defined with an editable column of type number.

1. I would like to define min and max values for the number and have it display in error (red) if values are entered outside of the range, so that it would work similar to a text field input (the way TextField uses inputProps and error props). I found the following online: https://stackoverflow.com/questions/74513146/define-min-and-max-input-values-on-mui-datagrid-number-column-cell and added it to my column definition, and the range checking is working... but adding an error prop did not work and I was unable to find any API documentation for GridEditInputCell - does this exist and if so, where would I find it? is it possible to get the error functionality to render the input in red?
2. I would like to change the appearance of the editable column to make the editable cells obvious to the user without them having to double-click to see the input. is that possible? and if yes, how?

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 112.0.5615.121
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.39)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.3
    @emotion/styled: ^11.8.1 => 11.9.3
    @mui/base:  5.0.0-alpha.87
    @mui/icons-material: ^5.8.0 => 5.8.4
    @mui/material: ^5.8.1 => 5.8.6
    @mui/private-theming:  5.9.1
    @mui/styled-engine:  5.8.7
    @mui/system: ^5.9.1 => 5.9.1
    @mui/types:  7.1.4
    @mui/utils:  5.10.6
    @mui/x-data-grid: ^5.13.1 => 5.14.0
    @mui/x-data-grid-premium: ^5.14.0 => 5.14.0
    @mui/x-data-grid-pro:  5.14.0
    @mui/x-date-pickers: ^5.0.0-beta.1 => 5.0.0-beta.2
    @mui/x-date-pickers-pro: ^5.0.0-beta.0 => 5.0.0-beta.2
    @mui/x-license-pro: ^5.17.0 => 5.17.0
    @types/react:  18.0.14
    react: ^18.1.0 => 18.2.0
    react-dom: ^18.1.0 => 18.2.0
    typescript:  4.7.4

[m4theushw]

Please see https://mui.com/x/react-data-grid/editing/#validation

Adding min and max will only tell the browser how to validate the input. You need to move this validation to preProcessEditCellProps which will allow you to pass additional props to the input component (the error prop in this case).

[conerye]

I have added the use of preProcessEditCellProps for the validation and error prop as follows:
preProcessEditCellProps: (params) => {
const hasError = params.props.value < 0 || params.props.value > params.row.licensesAvailable;
const inputProps = { max: params.row.licensesAvailable, min: 0 };
return { ...params.props, error: hasError, inputProps };
}

This did not resolve the issue because setting error true does not render the input in red (range restriction still works this way tho). It just seems to stay 'stuck' in edit mode and the value is unchanged.
Please reopen this issue, as part 1 of the question is not resolved and there was no response to part 2.

[m4theushw]

Are you using a custom edit component? Note that the demo in https://mui.com/x/react-data-grid/editing/#validation uses a custom edit component that changes the background of the input to red. The default input, in this scenario, would look like https://mui.com/material-ui/react-text-field/#validation

[conerye]

I opened #8854 for this issue when this was closed and never rechecked. #8854 has been closed as well, resolution is documented there.