Dynamically change icon in fancy tree

Question

I'm using fancy tree viewer. https://github.com/mar10/fancytree

How to change the icon of a node dynamically based on an event.

Answer 1

The below code will loop through all child nodes after a lazy load, and change the child's icon (if the child is a node and not a folder). The renderTitle() is important here, as this tells the node to be redrawn and show the new icon. This can be applied to any other event type.

    $("#tree").fancytree({
        source: {
            url: "/your/source/url"
        },
        lazyLoad: function(event, data) {
            data.result = {
                url: "/your/lazyload/url"
            };
        },
        loadChildren: function(event, data) {
            var children = data.node.getChildren();

            for (var i = 0; i < children.length; i++) {
                if (!children[i].isFolder()) {
                    children[i].data.icon = "/your/icon.png";
                    children[i].renderTitle();
                }
            }
        }
    });