How to trigger preProcessEditCellProps on click of save

[achoud444]

Summary

I am trying to make edit and save in mui datagrid cell. Here is the link .

Several thing are not working here. Please help with this.

1. Country is not changing.
2. On change of country I also want to change the vat based on country.
3. If the country is not selected then clicking on save it should throw error on the cell which its background as red.

Examples

No response

Motivation

No response

Search keywords: How to trigger preProcessEditCellProps on click of save

[achoud444]

@MBilalShafi @michelengelen Can you please help here

[MBilalShafi]

Country is not changing

You could use singleSelect column type instead of adding a renderEditCell for this purpose, it's built for the same purpose. Here's a list of all available column types: https://mui.com/x/react-data-grid/column-definition/#column-types

If you also want to show the tooltip for the error, you might duplicate the GridEditSingleSelect component, add your functionality, and pass it as renderEditCell for the country column.

On change of country I also want to change the vat based on country.

Using processRowUpdate could help achieve that.

If the country is not selected then clicking on save it should throw error on the cell which its background as red.

The colDef.preProcessEditCellProps should do this. See answer to first point for adding the tooltip.

I tried to update your example to support these usecases (without the Tooltip part), here's the updated example: https://stackblitz.com/edit/react-ct2cgh?file=Demo.tsx

Is this what you are intending to do?

[achoud444]

@MBilalShafi Thanks for the reply

If the country is not selected then clicking on save it should throw error on the cell which its background as red.

This is still not working.. Suppose I add a new row if you can see here. On click of save I want to highlight the cells with red border (name and country). Can I do that?