Options

Below are the configuration options with their default values:

{
    autoOpen: false,
    data: [],
    dragoverClass: 'dragover',
    droppable: false,
    el: null,
    layout: 'div',
    loadNodes: null,
    noDataClass: 'infinite-tree-no-data',
    noDataText: 'No data',
    rowRenderer: defaultRowRenderer,
    selectable: true,
    shouldSelectNode: null
}

autoOpen

Type: boolean Default: false

Sets to true to open all nodes.

Since

0.1.0

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    autoOpen: true
});

data

Type: Object or Array Default: []

Since

0.1.0

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: [
        { // node
            id: '<unique-node-id>', // Required
            label: 'Node Label', // Required
            children: [] // Optional
        }
    ]
});

dragoverClass

Type: string Default: "dragover"

Since

0.9.0

Example

var tree = new InfiniteTree({
    dragoverClass: 'my-draggable-class'
});

droppable

Type: boolean Default: false

Makes tree nodes droppable.

Since

0.6.0

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    droppable: true
});

If you're not using the defaultRowRenderer, you have to add the attribute droppable="true" for a droppable tree item element in your rowRenderer function, like so:

<div aria-id="<node-id>" class="tree-item" droppable="true">...</div>

el

Type: DOMElement Default: null

The DOM element for rendering a tree.

Since

0.1.0

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree')
});

layout

Type: string Default: "div"

Since

0.9.0

Example

var tree = new InfiniteTree({
    layout: 'table' // table layout
});

loadNodes

Type: Function Default: null

Loads nodes on demand.

Since

0.7.0

Arguments

1. parentNode (Node): The Node object that defines the parent node.
2. done (Function): An "error-first" callback. The first err argument of the callback is an error object. The second nodes argument of the callback is an array of node objects. If no error occurred, err should be set to null.

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: [
        { // node
            id: '<unique-node-id>', // Required
            label: 'Node Label', // Required
            loadOnDemand: true // Set loadOnDemand to true if you want to load child nodes on demand
        }
    ],
    loadNodes: function(parentNode, done) {
        var nodes = [
            {
                id: 'node1',
                label: 'Node 1'
            },
            {
                id: 'node2',
                label: 'Node 2'
            }
        ];
        setTimeout(function() {
            done(null, nodes);
        }, 1000);
    }
});

noDataClass

Type: string Default: "infinite-tree-no-data"

Since

0.9.0

Example

var tree = new InfiniteTree({
    noDataClass: 'empty-content'
});

noDataText

Type: string Default: "No data"

Since

0.9.0

Example

var tree = new InfiniteTree({
    noDataText: 'No Data Available'
});

rowRenderer

Type: Function Default: defaultRowRenderer

A custom row renderer that returns a HTML string.

Since

0.1.2

Arguments

1. node (Node): The Node object.
2. treeOptions (Object): The tree options.

Example

An example of minimum setup is shown as below, the aria-id attribute is required.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    rowRenderer: function(node, treeOptions) {
        var state = node.state;
        // Check node state
        var html = [
            '<div aria-id=' + JSON.stringify(node.id) + ' class="tree-item tree-selected" droppable="' + treeOptions.droppable + '">',
            '   <div class="tree-node">',
            '       <a class="tree-toggler tree-toggler-closed">►</a>',
            '       <span class="tree-title">' + node.label + '</span>',
            '   </div>',
            '</div>',
            ''
        ].join('\r\n');
        return html;
    }
});

Find a more advanced example at examples/renderer.js.

selectable

Type: boolean Default: true

Makes tree nodes selectable.

Since

0.6.0

Example

Turn off selection of nodes.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    selectable: false
});

shouldSelectNode

Type: Function Default: null

Provides a function to determine if a node can be selected or deselected. The function must return true or false. For this to work, the option selectable must be true.

Since

0.6.3

Arguments

1. node (Node): The Node object.

Returns

(boolean): Returns true to select or deselect a node, else false.

Example

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    selectable: true,
    shouldSelectNode: function(node) {
        if (!node || (node === tree.getSelectedNode())) {
            return false; // Prevent from deselecting the current node
        }
        return true;
    }
});