I'm trying to apply a basic formula that multiplies the "quantity" by "cost" to get a "total cost". The user can change the "quantity" or "cost" which will update the "total cost". I then want to retrieve that updated "total cost" from the underlying data in the grid. From my understanding of the documentation, I should be using "valueSetter", but it does not work. Meaning, after the user changes the "cost" or "quanity", I can see the data changed in the display of the grid. However, the underlying data does not change.

I've already tried the only other source found here under a similar thread, but it does not work.

Code example: This uses methods shown under the documentations examples.

let gridApi;

const gridOptions = {
    rowData: [ { item: "Shirt", quantity: 10, cost: 2.00 , total: 20.00 } ],
    columnDefs: [
        { field: "item", },
        { field: "quantity", headerName: 'Qty', editable: true, },
        { field: "cost", headerName: 'Cost', editable: true, },
        {
            field: "total",
            headerName: 'Total Cost',
            editable: false,
            valueGetter: params => params.data.quantity * params.data.cost,
            valueSetter: params => {
                params.data.total = params.newValue;
                return true;
            },
        },
    ],
};

document.addEventListener("DOMContentLoaded", function () {
    const gridDiv = document.querySelector("#myGrid");
    gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

$("#ButtonDisplayData").click(function () {
    const allRowData = [];
    gridApi.forEachNode(node => allRowData.push(node.data));

    //Display data using node and directly. Nothing changes
    console.log(allRowData);
    console.log(gridOptions.rowData);
});

As I said above, I tried the suggestion from the similar thread found on this site and it didn't work.

const colId = params.colDef.colId;
const paramsCopy = { ...params.data };
const paramsCopy = params.data ;
paramsCopy[colId] = params.newValue;
params.data = paramsCopy;
params.node.setData(paramsCopy);
return true;

I'm trying to apply a basic formula that multiplies the "quantity" by "cost" to get a "total cost". The user can change the "quantity" or "cost" which will update the "total cost". I then want to retrieve that updated "total cost" from the underlying data in the grid. From my understanding of the documentation, I should be using "valueSetter", but it does not work. Meaning, after the user changes the "cost" or "quanity", I can see the data changed in the display of the grid. However, the underlying data does not change.

I've already tried the only other source found here under a similar thread, but it does not work.

Code example: This uses methods shown under the documentations examples.

let gridApi;

const gridOptions = {
    rowData: [ { item: "Shirt", quantity: 10, cost: 2.00 , total: 20.00 } ],
    columnDefs: [
        { field: "item", },
        { field: "quantity", headerName: 'Qty', editable: true, },
        { field: "cost", headerName: 'Cost', editable: true, },
        {
            field: "total",
            headerName: 'Total Cost',
            editable: false,
            valueGetter: params => params.data.quantity * params.data.cost,
            valueSetter: params => {
                params.data.total = params.newValue;
                return true;
            },
        },
    ],
};

document.addEventListener("DOMContentLoaded", function () {
    const gridDiv = document.querySelector("#myGrid");
    gridApi = agGrid.createGrid(gridDiv, gridOptions);
});

$("#ButtonDisplayData").click(function () {
    const allRowData = [];
    gridApi.forEachNode(node => allRowData.push(node.data));

    //Display data using node and directly. Nothing changes
    console.log(allRowData);
    console.log(gridOptions.rowData);
});

As I said above, I tried the suggestion from the similar thread found on this site and it didn't work.

const colId = params.colDef.colId;
const paramsCopy = { ...params.data };
const paramsCopy = params.data ;
paramsCopy[colId] = params.newValue;
params.data = paramsCopy;
params.node.setData(paramsCopy);
return true;

• javascript
• ag-grid

1 Answer 1

Use onCellValueChanged event to update your raw data and use id column to get your row node.

For example, you can update your total in your raw data whenever you change quantity column like this

{ 
  field: "quantity", 
  headerName: 'Qty', 
  editable: true, 
  onCellValueChanged: (e: any) => {
    console.log("e", e);
    e.node.setDataValue("total", e.data.quantity * e.data.cost)
  }

Here's a plunker for you: https://plnkr.co/edit/5nJKgM7RagFEgslS

Change quantity in the first row, it will change your total column as a result and then click on show updated data button.

This is how you can access your row node with id 1 (the first row)

const rowNode = gridApi!.getRowNode('1')!;

Read more on: https://www.ag-grid/javascript-data-grid/data-update-single-row-cell/