News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free

Editable JavaScript TreeGrid

Base component to display and edit data in grid and tree view

EJS TreeGrid is a DHTML component written in pure JavaScript to display and edit data in table, grid, tree view, tree grid or bar chart on HTML page.
It is the fastest AJAX grid with the richest features set available on the Internet.

TreeGrid 1st live example

Supported browsers


Microsoft Internet Explorer
IE6, IE7, IE8, IE9, IE10, IE11
Microsoft Edge 12, 13, 14
(all document modes
quirks, quirks5, strict, compatibility)

Mozilla Firefox
FF1.5 - FF49

Google Chrome
CH3 - CH53

Apple Safari
Mac OS X & Windows
S3 - S10

Opera
O9 - O12 (Presto)
O15 - O39 (WebKit)

Apple iOS
Safari Mobile
S4 - S10

Android Mobile
Google Chrome
2.x, 3.x, 4.x, 5, 6

Microsoft Internet Explorer; 6, 7, 8, 9, 10, 11; Edge: 12, 13, 14
(all document modes: quirks, quirks5, strict, compat.)
Mozilla Firefox; FF1.5 - FF49 Google Chrome; CH3 - CH53 Apple Safari; S3 - S10 Opera; O9 - O12 (Presto); O15 - O39 (WebKit) Apple iOS Safari Mobile; 4.2, 4.3, 5, 6, 7, 8, 9, 10 Android Mobile Google Chrome (And all Trident, Gecko and WebKit / Chromium / Blink engine clones)
(And all Trident, Gecko and WebKit / Chromium / Blink engine clones)

Basic grid features

  • cell content editing
  • changes update to server by AJAX
    or by page / form submit (HTTP POST)
  • row sorting
  • row adding and deleting
  • row state colors
  • column resizing
  • column hiding / displaying
  • toolbar

Server side support

EJS TreeGrid package contains many examples and predefined code of server side scripts:
  • ASP.NET (C#, Visual Basic)
  • JSP (Java)
  • PHP
  • AngularJS 1 & 2 (NodeJS REST API)
  • React (NodeJS REST API)
  • HTML (all other)
EJS TreeGrid can be used also in any other server script environment that can handle and process XML or JSON data.

Main advantages

  • tree feature in rows or columns or both
  • advanced cell formulas, expressions and calculations like in MS Excel
  • various paging types to display nearly unlimited number (millions) of rows using AJAX and pager components. Also column paging.
  • advanced filters similar to MS Excel or filtering by any expression
  • searching like in Google
  • automatic rows grouping to a tree according to column values
  • multi level Pivot tables (two dimensional grouping), editable, unlimited source columns
  • fixed (frozen) columns and rows on all the edges
  • cell spanning among columns (colspan) or rows (rowspan) or in both directions. Dynamic span by users also available.
  • row dragging even among the grids (moving and copying)
  • row resizing by mouse dragging. Vertical alignment of the row content.
  • row, column or cell ranges selecting by key or mouse click or dragging; predefined or custom actions with the selection possible
  • column moving, freezing or unfreezing by a mouse.
  • column adding, copying and deleting.
  • various cell types like text, number, check box, textarea, combo box, image, link or any other HTML, etc.
  • advanced formatting values for displaying and editing according to the type and format string.
  • a calendar component to pick dates; a special dialog to choose date ranges and repeating dates.
  • various editing masks
  • cell value validation while editing, after edit and before save
  • multi line editing in textarea
  • cell focus cursor for one cell or cells rectangle like in MS Excel. Dragging focused cells.
  • auto fill cell values by mouse dragging like in MS Excel
  • mass cell changes (clear, copy, move, fill, paste, validate)
  • auto complete combo with suggest list for any cell
  • printing option or export to PDF with various PDF settings and possible splitting to pages in both directions
  • export to Microsoft Excel or any other spreadsheet program that can handle XLSX, XLS, CSV files or HTML tables
  • data synchronisation with server
  • master / detail relationship, more different master and detail grids available at once
  • nested detail grids in TreeGrid cell. Unlimited nesting levels.
  • responsive web design, changing grid layout according to viewport size by defined media rules.
  • creating of Gantt chart also available; includes dependencies, resources, summaries, constraints and dynamic update.
  • display and dynamic update of external objects like Adobe Flash, Microsoft SilverLight or custom JavaScript objects
  • fully customizable CSS styles to change grid look
  • advanced JavaScript API with events and methods to control the grid from JavaScript
  • using grid without any need of JavaScript code on a page
  • sophisticated XML input / output format, JSON format also supported
  • fully customizable key and mouse navigation action schemas
  • very fast to display and control
  • script modules - modules not in use can be removed from the script in order to shorten its length
  • localization to any language possible, including all texts, date and number formats
  • RTL version for Middle East languages plus Hirji dates
  • both CSS1 strict and quirks mode supported (any <!DOCTYPE> setting)

TreeGrid 2nd live example

More examples