Skip to main content


specifies a template for Tree items

template?: (item: ITreeItem, isFolder: boolean) => string | null;


const tree = new dhx.Tree("tree", {    template: ({ value }, isFolder) => {        const template = `            <div className="dhx_tree_template">                <span className="dhx_tree_template__value">${value}</span>                <div className="dhx_tree_template__rows">                    <button className="dhx_tree_template__button remove">                        <i className="far fa-trash-alt dhx_tree_template__icon dhx_tree_template__icon--danger"></i>                    </button>                </div>            </div>        `        return isFolder ? null : template;    }});

Related sample: Tree. Handling Events In Template

The template function takes two parameters:

  • item - object, an object of a Tree item
  • isFolder - boolean, defines whether an item is a folder

and returns either a string or null.

Tip. The callback function together with the isFolder parameter allows you to specify a template for child items only.

Change log:

added in v7.2