Often there is a need to show a hierarchically structured data.
Our dhtmlxTree (DHTML extensions Tree) lets you do this in an easy and most comfortable way - in any browser! This JavaScript Tree Menu component allows creating user-friendly navigation bar for a commercial application or a web site. Menu items are organized into compact, hierarchical tree structure so users can find information they need easily.
Having such feature, as dynamical loading of items from XML stream allows dhtmlxTree to handle large amounts of data. Drag-and-drop makes it possible to drag items not just within one tree, but between different trees. Try by yourself now:

 
Drag & drop items within the trees as well as between trees
Double-click on folder label or click on [+] plus to expand subitems.


Rich client-side Javascript API gives an opportunity to change tree styles (folder images, fonts, indents, and colors) and manage any part or activity. Our DHTML tree works perfectly in all main Web-browsers for Windows, Mac OS X, Linux or Unix so you don't have to care about the browser compatibility.
dhtmlxTree has built-in checkboxes providing a handy tool for any kind of navigation system where selection lists are required.

What's new in version 1.3* (April 18, 2006):

  • Editable Items
  • Ability to automaticaly update server side on tree structure changes
  • Distributed Loading
  • Keyboard navigation
  • Custom type sorting
  • Ability to move items within/between trees with script API
  • Extended Safari, Conqueror, Opera compatibility
  • Multiselect, drag-n-drop multiple items
  • Locked items
  • Right-to-left languages support
  • Error handling
  • Drag-n-drop to/from dhtmlxGrid

  • * - some functionlity available in professional edition only

    Supported Browsers:

  • IE 5.x and above
  • Mac OS X Safari
  • Mozilla 1.4 and above
  • FireFox 0.9 and above
  • Opera (Xml support depends on browser version)
  • Features:*

  • Multibrowser/Multiplatform support
  • XHTML compartible
  • Editable Items
  • Keyboard navigation
  • Multiselect
  • Right-to-left languages support (RTL)
  • Full controll with JavaScript API
  • Dynamic loading
  • Distributed Loading
  • XML support
  • Extended serialization to XML
  • drag-&-drop (within one tree, between trees)
  • customizable drag-&-drop to/from dhtmlxGrid
  • copy with drag-n-drop
  • drop-between/drop-inside
  • checkboxes (two/three states), disabled/hidden
  • customizable icons (with javascript or xml), icon size
  • user data for nodes
  • Async mode loading support
  • .NET custom server control
  • JSP custom tag
  • Macromedia Cold Fusion support
  • Detailed documentation

  • * - some functionlity available in professional edition only

    Editions

  • Standard - available for free download (for non-commercial use).
  • Professional - contains additional features (with examples) which are not present at standard edition. Included with Commercial and Enterprise licenses. Contact us to buy.
  • Licensing

  • Open Source - GPL (standard edition only)
  • Commercial License (standard and professional editions): in order to use any edition of dhtmlxTree in a commercial project, get all features available in professional edition or to have support you can purchase a Commercial License ($99). Contact us to buy.
  • Download:

  • Full package (v.1.3 standard)
  • Documentation only
  • Examples:

  • Initialize object
  • Add/Delete items
  • Attached events
  • Collapse/Expand branch
  • Change item text/images
  • Checkboxes
  • Change design
  • Autoloading from xml
  • Drag and Drop
  • Working with database (PHP/MySQL)
  • Documentation:

  • API Functions and Documentation
  • Customers:

    Siemens Bank of America Securities Industry Automation Corporation Deutsche Bank Sony Computer Entertainment Europe Samsung Science Applications International Corporation Dallas Semiconductor

    Download latest version of javascript tree source code

    Code Sample

    <link rel="STYLESHEET" type="text/css" href="jTreeX.css"> <script type="text/javascript" src="dhtmlXCommon.js"></script> <script type="text/javascript" src="dhtmlXTree.js"></script> <script type="text/javascript"> var tree1 = null; function doOnLoad(){ tree1=new dhtmlXTreeObject('treebox1',"100%","100%",0); tree1.setImagePath("imgs/"); tree1.enableDragAndDrop(true); tree1.loadXML("tree.xml") } </script> <body onload="doOnLoad()"> <div id="treebox1" style=" width:250px; height:250px; background-color:#f5f5f5; border :1px solid Silver; overflow:auto;"> </div>

    See also our Java tree applet - jTree.