Saving Values

After editing a cell, the grid normally inserts the new value into your data using the column definition field
attribute. This covers the most common case, where the grid owns the data state and treats the data as mutable.

This page discusses alternatives to this approach.

Value Setters provides an alternative to using field for
setting the data. Use valueSetter if you want the grid to manage the data (ie update the data inline) but you want
to update in a way other than using field. This is useful if you are not using field, or somehow need to
manipulate the data in another way (for example, the data item isn’t a simple key/value pair map, but contains a
more complex structure).
Read Only Edits stops the grid from updating data,
and relies on the application to make the update after the edit is complete. Use this if you want to manage the grid
data state externally, such as in a Redux store.

Value Setter

A Value Setter is the inverse of a Value Getter. Where the
value getter allows getting values from your data using a function rather than a field, the value setter allows you to
set values into your data using a function rather than specifying a field.

```python
columnDefs = [
# Option 1: using field for getting and setting the value
{‘field’: ‘name’},

# Options 2: using valueGetter and valueSetter - value getter used to get data
{
    'valueGetter': {'function': 'params.data.name'},
    'valueSetter': {'function': '''
         params.data.name = params.newValue;
         return true;
         '''
                    }
}

]
```

A value setter should return True if the value was updated successfully and False if the value was not updated (
including if the value was not changed). When you return True, the grid knows it must refresh the cell.

valueSetter (string | function) Custom function to modify your data based off the new value for saving.
Return True if the data changed.

The example below demonstrates value setters working alongside value getters (value setters are typically only used
alongside value getters). Note the following:

All columns are editable. After an edit, the example prints the updated row data to the console to show the impact of
the edit.
Column Name uses valueGetter to combine the values from the two attributes firstName and lastName (separated by
a space) and valueSetter is used to break the value up into the two same attributes.
Column A uses field for both getting and setting the value. This is the simple case for comparison.
Column B uses valueGetter and valueSetter instead of field for getting and setting the value.
Column C.X and C.Y use valueGetter to get the value from an embedded object. They then use valueSetter to set the
value into the embedded object while also making sure the correct structure exists (this structure creation would not
happen if using field).

View the JavaScript functions used for this example.

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.valueSetterName = (params) => {
  const fullName = params.newValue;
  const nameSplit = fullName.split(" ");
  const newFirstName = nameSplit[0];
  const newLastName = nameSplit[1];
  const data = params.data;
  if (data.first_name !== newFirstName || data.last_name !== newLastName) {
    data.first_name = newFirstName;
    data.last_name = newLastName;
    // return true to tell grid that the value has changed, so it knows to update the cell
    return true;
  } else {
    // return false, the grid doesn't need to update
    return false;
  }
};

dagfuncs.valueSetterB = (params) => {
  console.log("in valuesetterb");
  const newVal = params.newValue;
  const valueChanged = params.data.b !== newVal;
  if (valueChanged) {
    params.data.b = newVal;
  }
  return valueChanged;
};

dagfuncs.valueSetterCX = (params) => {
  const newVal = params.newValue;
  if (!params.data.c) {
    params.data.c = {};
  }
  const valueChanged = params.data.c.x !== newVal;
  if (valueChanged) {
    params.data.c.x = newVal;
  }
  return valueChanged;
};

dagfuncs.valueSetterCY = (params) => {
  const newVal = params.newValue;
  if (!params.data.c) {
    params.data.c = {};
  }
  const valueChanged = params.data.c.y !== newVal;
  if (valueChanged) {
    params.data.c.y = newVal;
  }
  return valueChanged;
};