Tree data described with children

Embedded Children

It is possible to have a row data structure for tree data where the children for each row node is embedded in its own definition, you can see an example of such data structure below:

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,
      },
    ],
  },
];

To deal with the type of data structure in AG Grid, first we need to flatten the data.

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;
};

You can even perform CRUD actions

You can see this implemented in the following example:

https://plnkr.co/edit/CcuNFU0p70Ns9QDq?preview 

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/