Async Data

The tree allows to load children asynchronously using getChildren option, and hasChildren field on the node.

Demo

'getChildren' option:

This options receives a function that has a TreeNode parameter, and returns a value or a promise that resolves to the node's children:

(node:TreeNode) => TreeNode[] | Promise<TreeNode[]>

The function will be called whenever a node is expanded, the hasChildren field is true, and the children field is empty.
The result will be loaded into the node's children attribute.

Example:

options = {
  getChildren: (node:TreeNode) => {
    return request('/api/children/' + node.id);
  }
}

nodes = [
  {
    name: 'asyncRoot',
    hasChildren: true
  },
  {
    name: 'root2',
    children: [
      {
        name: 'leaf',
        hasChildren: false
      }
    ]
  }
]