dhtmlxTreeGrid is a cross-browser JavaScript UI component designed to represent tabular data in hierarchical view. It is based on our Ajax/DHTML control dhtmlxGrid and combines tree view and editable grid.

Ajax support and rich JavaScript API brings great flexibility to the treegrid allowing you to create completely customizable dynamic tables with expandable rows. Advanced data entry capabilities make the treegrid more interactive and let users to enter and edit table data in intuitive way.

The possibility to dynamically expand/collapse table rows assigned to the corresponding tree items makes this treegrid control a perfect solution for displaying tables with unlimited number of rows. To handle large amount of data efficiently, dhtmlxTreeGrid also provides such features as Smart XML Parsing (renders grid rows dynamically on node opening) and Smart Rendering (renders only rows situated in the visible area; available since v.1.6.).

Live demo

Themes:

Modern

Light

Native

As an extension of dhtmlxGrid the treegrid deploys all its functionality including client-side data editing and sorting, columns resizing and different cell types. The control provides advanced drag-n-drop capabilities (both drop-between and drop-inside are supported) and the ability to work in a split mode (frozen columns). Furthermore, starting from version 1.6 dhtmlxTreeGrid provides long-expected paging support. Built-in filtering capabilities as well as automatically calculated values for footer/header are now available in treegrid mode.

Being written entirely in JavaScript dhtmlxTreeGrid runs on client-side and allows manipulating and editing tree/table data on the fly. As communication between server and client is driven via Ajax mechanism, tree grid content is loaded asynchronously through XMLHTTP and can be updated without the whole page refreshing.

dhtmlxTreeGrid can be populated with data via JavaScript or from server data source (via XML). It provides robust and comprehensive solution that can greatly enrich any web application with dynamic content.

• Smart XML Parsing to increase performance
• Dynamical loading of levels
• Drag-n-drop as child/sibling
• Split mode support
• Vertical mathematical summation
• Tree specific script API
• Tree specific sorting
• Tree specific rows coloring
• Tree specific Smart Rendering
• Tree specific Paging
Common Features for Grid
and TreeGrid:
• Full control with JavaScript API
• Simple JavaScript or XML configuration
• Integration with HTML Form
• Easy styling with CSS or predefined skins
• Serialization to XML/SCV

• Loading from XML
• Working with clipboard
• Easy client-to-server comunication
• Resizable/movable columns
• Drag-and-drop rows/columns within grid
• Drag-and-drop in/from dhtmlxTree Pro
• Ability to create any editor or cell formating
  (using eXcell - eXtended cell object)
• Combobox, calendar, and more predefined eXcells
• Math Formulas for cells/Autocalculated values
• Invisible data blocks for rows/entire grid (userdata)
• Client-side sorting (string, integer, date, custom)
• Server-side sorting ready
• Wide range of event handlers
• Detailed documentation

Features Details

Featured Samples:

Drag and Drop between Grids
Math calculations
Aggregation in TreeGrid
Search and Filtering in TreeGrid
Dynamic loading (using PHP)
Paging in dhtmlxTreeGrid
Smart Parsing
Smart Rendering in dhtmlxTreeGrid
Tree related API
TreeGrid lines
Dynamic loading of sub items
TreeGrid serialization
TreeGrid Split Mode

All dhtmlxTreeGrid Examples

Standard - TreeGrid extension is available in Professional Edition only. At the same time dhtmlxGrid Standard Edition is available for download and usage under GNU GPL terms.

Professional - contains TreeGrid functionality and additional Grid features (with examples) which are not present at Standard edition. Delivered under Commercial and Enterprise licenses.

Professional Edition Features are:

Ability to display Tree structure and related functionality
Loading XML from String
Frozen columns
Merged cells
Clipboard support
Export\Import from CSV
Serialization - possibility to create XML based on updated treegrid content
Drag-and-drop in/from dhtmlxTree
Drag-and-drop of multiple items
Move columns with drag-n-drop
Copy with Drag-and-drop
Math Formulas for cells
Footer
Customizable Sorting
Context Menu
Configuration via XML (moved to Standard since v.1.3)
Columns move/delete/insert with script methods
Various events handlers
Simultanious Update of Database (dhtmlxDataProcessor)
Wider API
Official Support/Update period

more Professional Edition features

Licenses

Commercial License includes dhtmlxTreeGrid Professional Edition (dhtmlxGrid Professional + TreeGrid Extension) and allows you to use it in one project (application) with unlimited number of copies. According to this license we provide you with support (consultations) and free-of-charge bug fixing during 1 month. This license costs $299.

Enterprise License includes dhtmlxTreeGrid Professional Edition (dhtmlxGrid Professional + TreeGrid Extension) and allows you to use it in unlimited number of projects on condition that all of them are projects of one company. Free support\upgrade period is 12 months. This license costs $549.