Options

Below are the configuration options with their default values:

{
    autoOpen: false,
    data: [],
    droppable: false,
    el: null,
    rowRenderer: defaultRowRenderer,
    selectable: true,
    shouldSelectNode: null
}

autoOpen

Type: boolean Default: false

Set to true to open all nodes.

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

data

Type: Object or Array Default: []

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

droppable

Type: boolean Default: false

Make tree nodes droppable.

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.

rowRenderer

Type: Function Default: defaultRowRenderer

A custom row renderer that returns a HTML string. An example of minimum setup is shown as below, the aria-id attribute is required.

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

Make tree nodes selectable.

Example: Turn off selection of nodes.

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

shouldSelectNode

Type: Function Default: null

You can provide 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.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    selectable: true,
    shouldSelectNode: function(node) {
        if (!node || (node === tree.getSelectedNode())) {
            return false; // Return false to prevent from deselection
        }
        return true;
    }
});