Tree data described with children

Embedded Children

Child embedded data is when the child parent relationship is expressed via nesting in the dataStructure, for example in the data for this plunker, the children of the parent row are nested inside its 'children' attribute: 

let rowData = [
  {
    children: [],
    leaf: true,
    name: 'No children',
    id: 1,
  },
  {
    leaf: false,
    name: 'Has children',
    id: 2,
    children: [
      {
        children: [],
        leaf: true,
        name: 'leaf 1',
        id: 3,
      },
      {
        children: [],
        leaf: true,
        name: 'leaf 2',
        id: 4,
      },
      {
        children: [],
        leaf: true,
        name: 'leaf 3',
        id: 5,
      },
    ],
  },
];

As shown in the plunker, we can handle such structures by flattening the data such that it conforms to ag-Grid's specifications before setting it as rowData using a brace of functions like so: 

const flatChildren = (data) => {
    let flattenedData = flattenChildrenRecursively(data);
    return flattenedData;
};
const flattenChildrenRecursively = (data) => {
    let newData = [];
    data.forEach((initialRow) => {
        newData.push(initialRow);
        initialRow.children.forEach((child) => {
            child.parent = initialRow;
            newData.push(child);
            newData = [...newData, ...flatChildren(child.children)];
        });
    });
    return newData;
};

Once we have this functionality, we can perform actions (CRUD) directly onto the the embedded data and each time resubmit our data to the grid via these flattening functions: 

In the gif above, you can see how we are performing delete and create actions via recursive functions and then flattening the data each time before submitting it to the grid via setRowData(). 

Children by reference (Using Ids)

This example shows how to use tree data with a model like this:

var rowData = [
 {
 thisNodeId: 1,
 childrenNodes: [
 {
 thisNodeId: 1,
 childrenNodes: [
 {
 thisNodeId: 2,
 childrenNodes: [],
 },
 {
 thisNodeId: 3,
 childrenNodes: [],
 },
 ],
 },
 {
 thisNodeId: 2,
 childrenNodes: [],
 },
 {
 thisNodeId: 3,
 childrenNodes: [],
 },
 ],
 },
];

This example utilises a recursive function to flatten a dataset to be used with the grid. In this case, the actual data is separated from its hierarchy, this is to simulate how hierarchy can be grafted onto a dataset which doesn't have one at all. This method is flexible however and provided the hierarchy is defined correctly, can work with many other configurations as well. 

https://next.plnkr.co/edit/1zqhCCEMSdgrqzyE?preview

The picture below shows the console logs from the `flatChildren` function.

 This next picture shows the final output: 

Tree Data with multiple nested children (grandchild, great grandchild etc.)

The following example uses this dataset to model as tree data: https://plnkr.co/edit/X4ODoZjMztFTsl1W 

Note: the parent in this dataset is denoted by father and the children are resource

 

let rowData = [
{
rrder: '1223',
regi: '1235',
rgnamaste: 'Kellampalli',
father: 'Ram Sundar',
sonin: 'Kavach, Gupatha',
chef: 'Ram Sundar',
period: '222',
semes: '13230',
uservalue: '19523',
resource: [
{
rrder: '120423',
regi: '123755',
rgnamaste: 'Kellampalli',
father: 'Kavach1, Gupatha',
sonin: 'Kavach, Gupatha',
chef: 'Ram Sundar',
period: '222',
semes: '12630',
uservalue: '1523',
resource: [
{
rrder: '12283',
regi: '12355',
rgnamaste: 'Kellampalli',
father: 'Kavach2, Gupatha',
sonin: 'Kavach, Gupatha',
chef: 'Ram Sundar',
period: '222',
semes: '12430',
uservalue: '2123',
resource: [
{
rrder: '12723',
regi: '12335',
rgnamaste: 'Kellampalli',
father: 'tata, roy',
sonin: 'Kavach, Gupatha',
chef: 'Ram Sundar',
period: '222',
semes: '122730',
uservalue: '15123',
resource: null,
},
],
},
],
},
],
},
]

Updating getNodeChildDetails

The following example demonstrates how you can upgrade an older AG Grid example that uses getNodeChildDetails to the updated way to configure tree data.

https://plnkr.co/edit/6rw05zoWTrqEIZnO

The example leverages server side tree data. Please see https://www.ag-grid.com/react-data-grid/server-side-model-tree-data/