Editable JavaScript TreeGrid Component

JavaScript TreeGrid

You can use dhtmlxTreeGrid as an individual component or as a part of dhtmlxSuite

Product Features

  • Cross-browser compatibility: IE, FF, Safari, Opera, Chrome
  • Smart XML Parsing to increase performance
  • Dynamic loading of sub-levels
  • Drag-and-drop rows as child/sibling
  • Split mode support (frozen columns)
  • Vertical mathematical summation
  • Tree-specific script API
  • Tree-specific sorting, rows coloring, Smart Rendering
  • Paging support
  • Full control with JavaScript API
  • Simple JavaScript or XML configuration
  • Integration with HTML form
  • Easy styling with CSS or predefined skins
  • Serialization to XML/CSV
  • Clipboard support
  • Inline editing
  • Context menu
  • Server-side integration with dhtmlxConnector
  • Resizable/movable columns
  • Drag-and-drop rows/columns within grid
  • Drag-and-drop in/from dhtmlxTree PRO
  • Combobox, calendar, and other predefined eXcells
  • The ability to create a custom eXcell
  • Math formulas for cells/auto-calculated 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

Live Demo

Treeview and editable datagrid in one control
dhtmlxTreeGrid is a cross-browser JavaScript treegrid component designed to represent and edit hierarchical data in a grid view. It is based on dhtmlxGrid PRO and combines treeview and editable datagrid.
Customizable, flexible ajax-based treetables
A rich JavaScript API brings great flexibility to dhtmlxTreeGrid, allowing you to create completely customizable, Ajax-based treetables with expandable rows. Advanced data entry capabilities make the treegrid more interactive and let users enter and edit table data in an intuitive way.
Fast Performance with Large Data Sets
The ability to dynamically expand and collapse table rows assigned to the corresponding tree items makes this treegrid control a perfect solution for displaying treetables with an 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), Smart Rendering (renders only rows in the visible area), and paging support.
Ajax Support and Server-Side Integration
Being written entirely in JavaScript, dhtmlxTreeGrid runs on the client side and allows the editing of the data on the fly. By using Ajax, the treegrid content can be updated without the page reload. To handle client-server communication and bind the grid data to the server database, you can use dhtmlxConnector (available for PHP, ASP.NET, Java, ColdFusion).
Feature Rich JavaScript TreeGrid
As an extension of dhtmlxGrid, the treegrid deploys all of its powerful functionality and offers a flexible and robust solution for adding a full-featured dynamic grid/treegrid into an Ajax-based web application. The component provides advanced drag-and-drop capabilities (both drop- between and drop-inside) and the ability to work in a split mode (frozen columns).

Editions and Licenses

Professional Commercial license
up to 5 developers
  • Use in one project
  • Standard ticket support
  • 1 month of updates (minor, major, bugfixes)
Professional Enterprise license
per company
  • Use in unlimited projects
  • Premium ticket support
  • 12 months of updates (minor, major, bugfixes)

Demo Apps & Learning Resources

Technical samples

All TreeGrid features are accompanied by an online sample

Ticket support

Create a support request and get fast and qualified help from our support/development team.


Our detailed documentation can learn how to use TreeGrid and effectively implement it in your own applications. It provides the detailed information regarding each aspect of the widget.

Community forum

If you don't have an active support subscription, you are welcome to post your technical questions to our forum. It's moderated by our official support team.

Need help with dhtmlxTreeGrid integration into your app? Contact us