JavaScript Data GridSaving Values

javascript logo

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 (e.g. the data item isn't a simple key / value pair map, but contains a more complex structure).

Read Only Edit 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.

const gridOptions = {
    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: params => {
                return params.data.name;
            },
            valueSetter: params => {
                params.data.name = params.newValue;
                return true;
            }
        }
    ],

    // other grid options ...
}

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.