Material UI Data Grid Cell Edit revert commit

user_5705891 0
Viewed 3552

I'm using Material UI's Datagrid with cell editing. Everything is working great except that when I persist a value there is a chance that it eror's and if this is the case then I need to revert back to the initial state.

I thought I could simply refetch my data from the API and the changes would be straight away shown to the user. However in the case of an error my API data doesn't change: so the Material UI's internal Datagrid state does not trigger a refresh and uses the persisted local value.

This is my datagrid:

<DataGrid
                rows={data}
                columns={columns}
                onEditCellChangeCommitted={(values, event) => {

                    updateApi(values).then(r => {
                        //Success
                    }).catch(e => {
                        //Error Whilst updating
                        // Revert back to passed in Data
                        }
                    ).finally(() => {
                            //api.forceUpdate(null);
                        }
                    )
                }}

            />

I tried to do do a api.forceUpdate(null); but that didn't work. I also tried to set the editMode to server, which again didn't work.

I also tried event.stopPropogation() but as I don't know if I want to stop the process until the updateApi promise is resolved the change is already committed.

material-ui reactjs
1 Answers

First I use onCellValueChange and not onEditCellChangeCommitted. And I dynamically changed the value.

  const onCellValueChange = (value: GridEditCellValueParams) => {
    // Get the row
    const rowIndex = rows.findIndex(row => row.id === value.id);

    if (rowIndex >= 0) {
      const row = rows[rowIndex] as any;

      // Validate if changed
      if (value.field in row && row[value.field] !== value.value) {
        const data = { id: row.id, [value.field]: value.value };

        // Sending to API
        Api.product.update(data).then(res => {
          const newRows = [...rows] as any;

          if (res.success) {
            // Change to new value
            newRows[rowIndex][value.field] = value.value;
          } else {
            // Change to old value
            newRows[rowIndex][value.field] = row[value.field];
          }

          setRows(newRows);
        });
      }
    }
  };
user_38459720
Related