CODEWITHSUNDEEP
javascriptreactjssassmaterial-ui
izyben
izyben

Reputation: 29

MUI Datagrid preProcessEditCellProps Error Message

How can I add error message to mui preProcessEditCell? I will like to display "Supplier Name cannot be empty" for the error text

{ field: "supplierName", headerName: "Name", width: 300, editable: true, preProcessEditCellProps: (params: GridPreProcessEditCellProps) => { const hasError = params.props.value === ''; return { ...params.props, error: hasError}; }, },

I tried including helperText to the object being returned but it seems it(helperText) is not a valid property.

Upvotes: 1

Views: 629

Answers (1)

Salil Upadhyay
Salil Upadhyay

Reputation: 11

You can simply add an if block to show an error message to the user. Note this triggers while the user is editing the field.

preProcessEditCellProps: (params) => {
        const hasError = params.props.value.length < 1;
        if (hasError) {
          // code to show error message i.e trigger toast for the user 
        }
        return { ...params.props, error: hasError };
      },

If you want to add validation while the user clicks on the save button, you should utilize the processRowUpdate callback, which will trigger onProcessRowUpdateError as soon as the validation fails.

const processRowUpdate = async (newRow, originalRow) => {
    console.log(newRow, originalRow);
   // make api call to save data in db/ 
  };

 const handleProcessRowUpdateError = React.useCallback((error) => {
    // handle error if validation fails while saving data
  }, []);

Upvotes: 1

Related Questions