Using HTML in item lable

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.

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>