4

I am trying to update a field in ag-grid and it keeps coming back with ERROR TypeError: Cannot assign to read only property 'quantity' of object '[object Object]'.

It allows me to edit the cell but when i try to update it comes up with this error.

I am using an observable from an ngrx store to populate the rowData as below:

this.order$.subscribe(order => {
            this.order = { ...order, products: [...order.products] };
        });

I have checked the above and I can update this object by saying this.orders.products = [] which says to me it is no longer immutable.

 <mi-ag-grid [data]="order.products" [columnDefs]="columnDefs" [suppressClickEdit]="false"></mi-ag-grid>

columnDefs = [
        {
            headerName: 'Code',
            field: 'code',
            width: 150
        },
        {
            headerName: 'Name',
            field: 'name',
            width: 200,
            editable: true
        },
        {
            headerName: 'Quantity',
            field: 'quantity',
            width: 150,
            editable: true
        }
    ];

I next tried suggestion from @GreyBeardedGeek and tried to set value with a valueSetter as per below, but still getting same error.

,
    {
        headerName: 'Quantity',
        width: 150,
        editable: true,
        field: 'quantity',
        valueSetter: quantityValueSetter
    },


function quantityValueSetter(params): any {
console.log(params);
params.data.quantity = params.newValue;

}

ccocker
  • 1,146
  • 5
  • 15
  • 39
  • Check [this](https://stackoverflow.com/a/52764888/4483102) post – un.spike Dec 03 '18 at 10:12
  • I left an expanded answer to a similar question here: https://stackoverflow.com/questions/56269113/aggrid-in-react-redux-app-is-modifying-underlying-data – Scott F Jun 30 '19 at 22:03

1 Answers1

8

The object that you are getting from the store and using in the grid is immutable.

By default, when you make a column in the grid editable, it will attempt to update the backing object directly, and this is the problem that you are seeing - the grid attempts to mutate an immutable object.

The solution is to add a "valueSetter" property to the grid column's definition. The value of this property should be a function that will receive the new value, and then use that new value to update the store.

When you have this property set, ag-grid will not try to update the object directly.

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67
  • Thanks :-) Been trying to work that out all day. Will spend some time tomorrow working through that – ccocker Dec 01 '18 at 16:03
  • 1
    Hi i tried a few things today with no luck, I am not trying to update the store at this stage as they are just local changes before i want to commit to an update to the store. Hence i tried making the object mutable which i tested to make sure i can change the object and i can but when it comes to ag-grid it still comes back and says I cannot make a change as it is read only – ccocker Dec 02 '18 at 01:24
  • Ok finally got it working for some reason this.order = { ...order, products: [...order.products] }; was not really making it immutable. I have written some more verbose code creating a new object by looping through this.order.products. I will spend sometime cleaning up the code and then post the solution. Thanks @GreyBeardedGeek you put me on the right track – ccocker Dec 02 '18 at 03:28