Options

Below are the configuration options with their default values:

{
    autoOpen: false,
    data: [],
    dragoverClass: 'dragover',
    droppable: false,
    droppableAttr: 'droppable',
    el: null,
    layout: 'div',
    loadNodes: null,
    noDataClass: 'infinite-tree-no-data',
    noDataText: 'No data',
    nodeIdAttr: 'data-id',
    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"

The dragover class name.

Since

0.9.0

Example

var tree = new InfiniteTree({
    dragoverClass: 'dragover'
});

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 data-id="<node-id>" class="infinite-tree-item" droppable="true">...</div>

droppableAttr

Type: string Default: "droppable"

Uses the attribute name to check if an element is droppable.

Since

1.0.0

Examples

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    droppable: true,
    droppableAttr: 'droppable',
    rowRenderer: function(node, treeOptions) {
        return '<div data-id="' + node.id + '" 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"

Uses div or table for layout in HTML.

Since

0.9.0

Example

Using div for layout in HTML:

var tree = new InfiniteTree({
    layout: 'div', // div layout
    rowRenderer: function(node, treeOptions) {
        return [
            '<div aria-id="' + node.id + '" class="infinite-tree-item">'
            '<span class="infinite-tree-title">' + node.name + '</span>',
            '</div>'
        ].join('');
    }
});

Using table for layout in HTML:

var tree = new InfiniteTree({
    layout: 'table', // table layout
    rowRenderer: function(node, treeOptions) {
        return [
            '<tr aria-id="' + node.id + '" class="infinite-tree-item">',
            '<td>' + node.props.name + '</td>',
            '<td>' + node.props.size + '</td>',
            '</tr>'
        ].join('');
    }
});

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
            name: 'Node 0',
            loadOnDemand: true // Set loadOnDemand to true if you want to load child nodes on demand
        }
    ],
    loadNodes: function(parentNode, done) {
        var nodes = [
            {
                id: 'node1',
                name: 'Node 1'
            },
            {
                id: 'node2',
                name: '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'
});

nodeIdAttr

Type: string Default: "data-id"

The node id attribute.

Since

1.0.0

Examples

var tree = new InfiniteTree({
    dataIdAttr: 'data-id',
    rowRenderer: function(node, treeOptions) {
        return '<div ' + treeOptions.dataIdAttr + '="' + node.id + '">' + node.name + '</div>';
    }
});

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 node id attribute (e.g. data-id) is required.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    rowRenderer: function(node, treeOptions) {
        var state = node.state;
        // Check node state
        var html = [
            '<div data-id=' + JSON.stringify(node.id) + ' class="infinite-tree-item infinite-tree-selected" droppable="' + treeOptions.droppable + '">',
            '   <div class="infinite-tree-node">',
            '       <a class="infinite-tree-toggler infinite-tree-toggler-closed">►</a>',
            '       <span class="infinite-tree-title">' + node.name + '</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;
    }
});