Javascript pivot table - gantt chart tables - EJS TreeGrid
Version 10.0

Javascript pivot table - gantt chart tables

TreeGrid can be used to create two or more dependent tables, one grid showing summary from other table(s) as Javascript pivot table. The pivot table relation is created by gantt chart tables code and it can be fully customized. See PivotTable example in the left side menu.


A new major version TreeGrid 10.0 was released on May, 18th.
Main updates in grid are HTML ids to support automated testing and reversed tree and level buttons like in MS Excel summary outline.
Main updates are in Gantt chart: discrete main bar, main bar plans (baselines), dependency color and shapes, dependencies between individual run boxes (e.g. to show Network diagram or PERT chart), new scheduling algorithm, horizontal paging in Gantt chart by scroll, vertical position and height of all objects, vertical shift of overlaid run boxes, side texts for all bars, selecting run boxes, disabling and locking bars and much more.
See what is new


Brief description

EJS TreeGrid is a DHTML component written in pure JavaScript to display and edit data in table, grid, tree view, tree grid or Gantt chart on HTML page

It is the fastest AJAX grid with the richest features set on the Internet.


Live example


Supported browsers

Internet Explorer (IE6, IE7, IE8, IE9, IE10, IE11)
(all document modes - quirks, quirks5, strict, compatibility)
Mozilla Firefox (FF1.5 - FF29)
Google Chrome (CH3 - CH36)
Safari (S3, S4, S5, S6, S7)
Opera (O9 - O12, O15 - O21)
Apple iPad Safari Mobile (incl. full scrolling and dragging)
Google Android browser (incl. full scrolling and dragging)
And all Trident, Gecko and WebKit / Blink engine clones

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. Column paging also included.
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 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
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
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 XLS files or HTML tables
data synchronisation with server
master / detail relationship, more different master and detail grids available at once
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)

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

Server side support

EJS TreeGrid package contains many examples and predefined code of server side scripts:

ASP (VBScript)
ASP.NET (C#, Visual Basic)
JSP (Java)
HTML (all other)

EJS TreeGrid can be used also in any other server script environment that can handle and process XML or JSON data.

Live example