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 the 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 amounts 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:

DHX Sky Blue

DHX Blue

Modern

Gray

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 and data validation capabilities as well as automatically calculated values for the footer/header are now available in treegrid mode.

Being written entirely in JavaScript, dhtmlxTreeGrid runs on the client-side and allows manipulating and editing tree/table data on the fly. As communication between server and client is driven via Ajax mechanism, the 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 a server data source (via XML). It provides a robust and comprehensive solution that can enrich any web application with dynamic content greatly.

Since v2.0 dhtmlx components, including dhtmlxTreeGrid, introduce the possibility to be easily organized within a common application interface with the help of dhtmlxLayout. With a new skin, introduced in version 2.5, the components got slick and clean look which can perfectly match the design of any modern website or application.

• Smart XML Parsing to increase performance
• Dynamic 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:

Dynamic loading (using PHP)
Paging in dhtmlxTreeGrid
Smart Parsing
Smart Rendering in dhtmlxTreeGrid
Tree related API
TreeGrid lines
Dynamic loading of sub items
Aggregation in TreeGrid
Search and Filtering in TreeGrid
Math calculations
Drag and Drop between Grids
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.