DHTMLX Docs & Samples Explorer

Using HTML in item lable

There is a specific way to include some HTML in text attribute of any node label. You should remplace special HTML characters with related xml entities. Or you can use nested <itemtext> tag with CDATA for the same.

Books
Mystery Thrillers
Some HTML
All the Flowers Are Dying
The Burglar on the Prowl
The Plot Thickens
Grifter's Game
The Burglar Who Thought He Was Bogart

Reload



Source
 
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<table>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <textarea id="treexml" style="width:600px;height:218px"><?xml version="1.0" encoding="iso-8859-1"?>
<tree id="0" radio="1">
<item open="1"  text="&amp;lt;font color='red'&amp;gt;Books&amp;lt;/font&amp;gt;" id="books" im0="tombs.gif" im1="tombs.gif" im2="iconSafe.gif" call="1" select="1">
    <item text="Mystery  Thrillers" id="mystery" open="1">
        <item id="lb">
            <itemtext><![CDATA[<font color="#ff00ff">Some <b>HTML</b></font>]]></itemtext>
            <item text="All the Flowers Are Dying" id="lb_1" />
            <item text="The Burglar on the Prowl" id="lb_2" />
            <item text="The Plot Thickens" id="lb_3" />
            <item text="Grifter's Game" id="lb_4" />
            <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
        </item>
    </item>
</item>
</tree>
            </textarea>        
            <br><a href="javascript:void(0)" onClick="reloadFromArea()">Reload</a>    
        </td>
    </tr>
</table>
<br>    
<script>
function reloadFromArea() {
    tree.deleteChildItems(0);
    tree.loadXMLString(document.getElementById("treexml").value);
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.loadXMLString(document.getElementById("treexml").value);
</script> <br><br>