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


Google Chrome

Microsoft Edge

Microsoft
Internet Explorer

Apple Safari
Mac OSX / iOS

Mozilla Firefox

Android Mobile

Opera


(And all Gecko and WebKit / Chromium / Blink engine clones)

Supported browsers


Google Chrome
Microsoft Edge
Microsoft Internet Explorer
Apple Safari; Mac OSX / iOS
Mozilla Firefox
Opera
Android Mobile
(And all Gecko and WebKit / Chromium / Blink engine clones)

JavaScript frameworks

EJS TreeGrid package contains examples and documentation to use in JavaScript frameworks:
  • Angular (TypeScript)
  • Ember (JavaScript / TypeScript)
  • Express (JavaScript)
  • React (JavaScript / TypeScript)
  • Svelte (JavaScript / TypeScript)
  • Vue (JavaScript / TypeScript)
  • Other frameworks (HTML, JavaScript)
EJS TreeGrid can be used also in any other client side framework that supports third party JavaScript code.

Server side support

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

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


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
  • rich text / HTML editor in contentEditable tags, full inline WYSIWYG editor, text, color and shapes styling, images and links.
  • inserting images to cell text or outside cells like MS Excel, by dropping it to cell or opening image file chosen from file system.
  • editing images inside or outside cells by mouse dragging - move, resize, rotate, crop, change opacity or name.
  • 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 synchronization 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 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 schemes
  • 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, built in translations to major languages
  • RTL version for Middle East languages plus Hijri dates
  • both CSS1 strict and quirks mode supported (any <!DOCTYPE> setting)

TreeGrid 2nd live example

More examples