ag-grid: hierarchical tree of referenced nodes: how to make the referenced attributes editable?

Question

I am testing the awesome ag-Grid component (really cool!) for a new Angular2 project. It should be used to display a CAD model structure with a "structure" (aka "tree"), and each node being the attributes of a CAD model.

Now, it is well possible to make a tree in ag-Grid. In its simpliest form, the data property holds the properties of the node (CAD model attributes). In this case, I can easily make the cells editable by assigning the property editable: true to the columnDefs.

However, the problem is, that if a CAD model is used in many places of the structure (tree), and one is edited, all others do not change.

Instead, the CAD models (the nodes) should in fact be references to the data, not the data itself. Ok, no problem with ag-Grid. Here you can see the comparison between a tree with copied nodes and a tree with referenced nodes:

Nodes are copied in the tree

ag-Grid's rowData:

rowData = [
  {
    data: { modelName: 'partA', weight: 12.5 }
    children: [ ... ]
  }
];

The ag-Grid's column definition would be:

{
  headerName: 'weight',
  field: 'weight',
  editable: true
}

Nodes are referenced in the treee

ag-Grid's rowData:

rowData = [
  {
    data: { model: MODEL_OBJECT }
    children: [ ... ]
  }
];

where MODEL_OBJECT is a javascript reference to the model object, which would be eg:

var modelA = { modelName: 'partA', weight: 12.5 }

And change the column definitions to:

{
  headerName: 'weight',
  valueGetter: 'data.weight',
  editable: true
}

See? The same properties are shown in the tree, but in fact they are fetched from the referenced POJS object. Thus, the models will be shared among their usages in the tree.

All well so far. But now - since there is a valueGetter for the column, the column weight is not directly editable. To be more precise, the ag-Grid allows to edit it, but it does not modify the value. Well, this is understandable since the valueGetter is acting as a mapping function which may not be "reversible" in the other direction. Consider something like 'data.firstName + data.lastName': how in the world should ag-grid know how to update data.firstname or data.lastName if the user enters another value for the column.

My question: how can I achieve the goal of having editable cells of referenced tree nodes? The intended effect is that if I edit the properties of a CAD model in one place of the tree, then the grid updates all other occurrences automatically, through the references.

Answer 1

The inverse of valueGetter in ag-Grid is newValueHandler. It's explained here . You define the newValueHandler on the colDef which then gives you the freedom to do whatever you want in the value.

var colDef = {headerName: "Tree Value", valueGetter: "data.a+data.b", editable: true, newValueHandler: myNewValueHandler};

function myNewValueHandler(params) {
  // set the value you want in here using the params
}