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

TreeGrid Gantt Chart

Gantt module extension for EJS TreeGrid

TreeGrid Gantt chart is an application core for building online (web based) project management software like MS Project or Oracle Primavera.
Or it can be used as a component to display any custom interactive row based bar chart. With all advantages of Editable JavaScript TreeGrid.
It is the most complex web Gantt chart and universal bar chart on the Internet.

Gantt chart & Network diagram live example

Supported browsers

Google Chrome

Microsoft Edge

Internet Explorer

Apple Safari
Mac OSX / iOS

Mozilla Firefox

Android Mobile


(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
Android Mobile
(And all Gecko and WebKit / Chromium / Blink engine clones)

Web grid features

TreeGrid Gantt and Bar charts also support all standard and many advanced web grid features like:
  • tree feature, unlimited levels of nesting
  • row sorting by one or more columns
  • row grouping to tree of unlimited levels
  • multi level Pivot tables (two dimensional grouping)
  • row filtering by one or more columns like in MS Excel
  • searching in grid like in Google or by expression
  • advanced calculations and formulas like in MS Excel
  • changes update to server by AJAX or by page / form submit (HTTP POST)
  • row adding, deleting and moving (dragging)
  • column resizing, hiding / displaying
  • fixed (frozen) columns and rows on all the edges
  • client paging and paging in tree
  • various cell types like: text, number, check box, textarea, combo box, image, link, HTML editor
  • advanced formatting values for display and edit, according to the type and format string.
  • cell spanning and merging, including dynamic span
  • printing option or export to PDF with various PDF settings and possible splitting to pages in both directions
  • master / detail relationship
  • responsive web design, changing grid layout according to viewport size by defined media rules
  • external objects in cells like custom JavaScript objects
  • complex popup menu system, submenus, collapsible tree, more columns, edit controls
  • localization to any language possible, built in translations to major languages

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.

Main Gantt chart features

  • Suitable especially for project management - tasks planning and scheduling
  • It can be used as a core of applications providing features for Microsoft Project or Primavera online on web
  • Tasks defined by duration or end date or both (mirrored), showing the percentage of completion. Discrete tasks possible
  • Milestones with 0 duration, starting and ending milestones
  • Resources for tasks, work and material resource types, task price calculation
  • Resource availability and usage charts, standalone or included in Gantt. Tasks filtering by resources possible
  • Discrete bars for a real flow - actual completion of a task usable along with a task bar
  • Flags - any custom icons displayed along with a defined tooltip on certain dates
  • Dependencies like descendants (successors) or ancestor (predecessors) or both (mirrored) between tasks
  • Dependency types end-start (fs), end-end (ff), start-start (ss), start-end (sf)
  • More than one dependency between two tasks possible (ss + ff)
  • Dependency lags in any time units, e.g. hours, days or elapsed days
  • Dependency floats define available span between dependency start+lag and end for automatic scheduling
  • Circular dependencies checking
  • Automatic task scheduling according to their dependencies and constraints after a task move or resize or any dependency change by moving the dependent tasks
  • Manual task scheduling, the incorrect dependencies are displayed in red
  • Automatic checking of all entered inputs and changes in chart for their correctness; automatic correction of errors possible
  • Holidays exclusion (working time calendar) - any defined dates, date ranges or repeated dates. Possible adding, modifying and deleting calendars.
  • The holidays are excluded from Gantt calculations and can also be hidden from the chart. Every task can have different calendar.
  • Critical path management - critical tasks with a specified slack can be highlighted or filtered
  • Project start and finish date constraint; tasks cannot be moved outside those; during automatic scheduling the first tasks can be forced to start on the project start
  • Task date constraints for early start date, early finish date, late start date, late finish date and mandatory start and end dates
  • All the date constraints are shown in Gantt chart as icons and can be added, deleted and moved with directly in the chart
  • Highlighted custom dates or date ranges in background or foreground
  • Fully customizable Gantt headers, defining any date formats in one or more header lines
  • The Gantt chart is fully interactive, all items can be changed directly in the chart by using mouse
  • The Gantt behavior is fully customizable by defining key and mouse action schema
  • Gantt popup menu with all available features (customizable) accessible from the menu on right click
  • Smooth zoom on a selected date range by mouse dragging or by clicking on the certain date in header
  • Custom zoom levels - unit size and width, different date format in header, chart size constraints and backgrounds can be defined for each zoom level
  • Custom CSS styles, every cell can display completely different bars (shapes and colors).
  • Possibility to extend the Gantt features by JavaScript API events and methods
  • RTL version for Middle East languages plus Hijri dates and calendar

Main Bar chart features

  • Suitable especially for service or resource management or for any other interactive bar type charts
  • More independent bars in one cell
  • Every bar can have its own type, width, caption, color, class and tooltip
  • Various types of bars with different features, like normal, empty, not movable, not resizable, start/end, etc.
  • All the bar settings can be changed by a user from popup menu or in another custom way
  • Bar overlapping possible, showing this as an error by different color and class label can be set up
  • Independent bar definition by its start date and width or end date
  • Or the bars can be defined by one start date and bar widths
  • The bars are fully interactive, can be created, resized, moved and deleted by mouse dragging
  • Many different kinds of bar moving, bars can be shifted or resized in order to create room for a new bar
  • Bars can be moved between rows or between grids or they can be dropped to any other custom place
  • Joined bars - moving joined bars together, splitting and joining bars possible by dragging
  • Possibility to extend the Gantt features by JavaScript API events and methods
  • Individual box identification, manipulation of particular boxes or box groups by API events and methods.
  • Other Gantt features like header, zoom, dependencies or resources can be also used with Run bars
  • Other Gantt objects like flags, flow, tasks or milestones can be also shown along Run bars within one cell

Bar chart live example

More examples