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

Changes log (txt file) Using custom CSS from 13.3 to 14.0 Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

Using in JavaScript frameworks

Angular Ember Express React Svelte Vue Other frameworks NodeJS server SalesForce LWC

Creating grid

Simple examples Basic information Creating grid Deleting grid Reloading grid Rendering grid Accessing grid by API

Data & communication
Data communication with server

Communication types AJAX communication AJAX SOAP envelope Submit communication Directly included data Data from JavaScript Cross domain / local load by JSONP Sessions (AJAX) Server response (AJAX) Synchronous communication (AJAX) Caching (AJAX) API (AJAX)

Download data

Settings for data download Layout XML structure Data XML structure

Upload data

Settings for data upload API for upload XML structure sent to server

Changing data from server

XML structure of download changes XML structure of request for a cell Synchronizing data with server

Input / output data formats

Complete list of tags Internal XML format Short XML format Extra short XML format DTD XML format JSON format

Cells
Cell basics

Cell type Cell format Dynamic format Dynamic type Cell value Reading / writing attributes by API Cell HTML Cell default Range or more values in one cell Cell with link URL Cell hint Cell tooltip / title Cell popup menu

Cell editing and changing values

Cell editability Dynamic editing Locking Defaults list Suggest list (auto complete) Tags input Changing cell value Mass cell change Clearing cells Editing cells Controlling <input> tag by JavaScript Input validation and restrictions Side checkbox Cell selecting

Calculations - cell formulas

Basics Formulas Mathematical functions Aggregate functions Special functions for actions Custom functions

Calculations - editable cell formulas

Basics Suggest list (auto complete) Defined names Actions for choosing cells Conditional functions Lookup functions Cell reference functions Logical functions Informational functions Mathematical functions Trigonometry functions Rounding numbers Number conversions String functions Date functions Summary functions Custom functions

Cell side buttons

Introduction Right side Button Left side Icon

Cell spanning

Column span Row span Dynamic spanning

Cell style and color

Basic grid style Sizing and scaling - responsive design Dynamic cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Editable cell images

Insert image Edit image

Cell types
Automatic type - Auto String - Text, Lines & Pass
Number - Int & Float

Format Localization

Date and time - Date

Format Calendar component Dates dialog Localization

List & combo - Enum & Radio

Introduction Definition Related lists Enum specific Radio specific

Checkbox - Bool
Action button - Button

Introduction Basic clickable button Switch button Radio / tab button Menu button Combo switch button Combo radio / tab button Special Space rows with buttons

Panel with more buttons - Panel

Definition Standard fast panel Custom panel

HTML and special types

Html type EHtml type (editable) Icon type Abs type List type Editable Link type Editable Img type DropCols type Upload File type

Columns

Column basics Column index Column visibility Column visibility menu Column selecting Column tree Auto column tree Column position and moving Column adding and copying Column deleting Column width Column API

Rows
Row basics

Rows by functionality Rows by position Row name Row id Row index

Default rows

Description Example of default rows Example of changing default row Attributes

Row tree

Tree attributes Actions & API for expand / collapse

Row identification

Setting row id attribute Row id attribute in tree Row id created from cell values API for row ids

Row visibility
Row adding and copying

Five ways of adding rows to grid Adding and copying restrictions Adding new empty rows Copying existing rows

Row deleting Row moving and dragging Row selecting Row height Row API Space rows
Features
Sorting rows

Sort settings Controlling sort position Comparing strings Sorting actions Sorting API

Grouping rows to tree

Group settings Creating groups Comparing strings Created group rows <D Group='1'/> User interface to choose grouping Grouping actions and API

Filtering rows

Filter settings Comparing strings User interface to choose filter Filter actions and API

Searching in rows and cells

Search settings User interface for search Search actions and API

Printing grid

Print settings Choosing items to print Page size Print API

Print / export to PDF

Introduction Client side settings Printing options Client side API Server side API Data sent from client to server

Export to Excel or CSV

Introduction and export types Basic settings Styling export XLSX export Gantt export CSV export Old XLS / XHTML export Export API Communication with server Client export Server export

Import from Excel

Basic settings Sheets manipulation

Copy & paste rows via clipboard

Copy & paste permissions Copying to clipboard Pasting from clipboard

Master - detail grids

Introduction External master - detail grids Nested master - detail grids Synchronizing grids Other attributes for master - detail

Pivot tables

Pivot attributes & API Pivot formulas

External objects (custom JavaScript objects) Undo & Redo
Gantt and bar chart
Gantt objects

Gantt objects list Display settings Edit settings

Main bar

Definition of main bar and plans Main bar as Task Edit settings Main bar content and side html Tip on mouse hover Vertical position and height Style specific attributes API to manipulate Main bars Actions Side text (deprecated) Real Flow (deprecated)

Run bar

GanttRun Definition Extended definition Run bar as Task Edit settings Save format Selecting Run boxes Run box content and side html Tip on mouse hover Box identification Vertical position and height Style specific attributes Overlaid (Error) boxes Containers for more boxes Dragging - moving and resizing API to manipulate Run boxes Actions Run special formulas

Summary task

Main for Main Main for Run Editable Main Editable Run

Gantt icons - Flag & Point

Flag - icon with text Point - math points

Gantt display objects

Header - column captions Cell and column Background Vertical movable Line Mark & Progress line

Gantt zoom

Zoom options Chart size limits Zoom selection Paging in Gantt chart

Dependency, constraints & schedule

Introduction Data units Defining dependencies Dependency colors and shapes Changing dependencies Correcting dependencies Scheduling algorithm Project date constraints Task date constraints Critical path - Slack (Float)

Gantt calendars

Global base calendar Local calendar Calendar list Calendars dialog Other settings

Gantt resources

Resources list Resources assign Resources filter Resources calculations Availability chart Resource usage chart Generated resource usage chart

Gantt popup menu Gantt API
Line and XY points charts

Charts in grid cells Chart JSON definition Base chart settings Basic attributes Size Axis and caption Individual chart lines Data sources Visual settings API for standalone usage

Paging in large grids
Paging root rows

Paging types and attributes Auto adding root pages API for paging

Pager components

Side pager Side pager type Pages Side pager type Gantt Side pager type Custom Pager with navigation buttons & edit Pager as list of page indexes

Paging in tree

ChildPaging - load / render on expand MaxChildren - limit children count ChildParts - load / render on scroll

Paging columns

Paging types and attributes Auto adding column pages API for column paging

Server paging

Server paging for root rows Server communication in root paging Root paging in very large tables Server paging in tree Server communication in tree paging XML Request for Data in root paging XML Download Data in root paging XML Request for root Page / children XML Download root Page / children API for server paging

TreeGrid DLL/SO for server paging

Introduction Compatibility with TreeGrid control Using TreeGrid server DLL/SO ASP.NET C# ASP.NET VB PHP JSP Java TreeGrid server concepts Function reference Calculations

JSON menus and dialogs
JSON menu description JSON menu definition example
Menu settings

Base attributes Visual settings Key navigation Behavior Size and scroll

Menu item settings

Base attributes Clickable item Inactive caption Collapsible sub level Popup sub menu Columns Bool item Enum item Edit item

Custom menu in JavaScript

Show custom menu Custom menu position Custom menu advanced settings Custom menu JavaScript events Custom menu JavaScript methods

Calendar dialog Custom calendar & JavaScript events Custom dialog in JavaScript
Global grid settings
Grid size and scroll

Default behavior Maximize grid height and width Update size according to the content Let a user to control the grid size Widths of individual sections Other scrolling attributes and API

Media rules - responsive design
Languages

Language & regional setup (Text.xml) Translate texts dynamically Change language

Grid cursor - Focus & hover

Focused cell and row Focused cell range Move and copy focused cells Filling cell values by dragging Tabulator navigation Key navigation Cursor look - focus & hover

Selecting rows, cells and columns

Selecting base Selecting rows Selecting cells Selecting columns

Global settings

Status messages Configuration menus Configuration menu - options Configuration menu - columns Configuration menu - print / PDF Configuration menu - export Default toolbar Useful API function Help file

Animations

Animations base Row animations Column animations Cell animations Animations for undo / redo Animations for server side changes Dialog animations

Grid configuration in cookies
Mouse & key events & actions

List of event handler types TreeGrid mouse events Mouse event names Key and mouse button prefixes Touch event names Event targets Assigning event actions / callbacks Event action parameters Action name suffix Calling actions from JavaScript Creating custom actions Focused vs. Actual cell TreeGrid key events JavaScript API events

Mouse API event TreeGrid files
Debugging and testing

Debug window Automated testing

Main bar and Milestone

TreeGrid documentation

Base Gantt chart task.
Defined by GanttStart (start date) and GanttEnd (due date) or by GanttStart (start date) and GanttDuration (length) as one continuous bar.
Or defined by GanttParts as more discrete bars.
Supports more tasks (plans) in one cell, the count of the plans is defined by GanttCount. The plans are independent, can have their own dependencies, resources or percentage completion. Every task in individual plan can be discrete or continuous.

Since 10.0 the Main bar can be also discrete and has replaced the Real Flow.

Definition

Defining the individual main bars and plans

new 10.0 <C> int

GanttCount

[1]
A number of available plains of main bars in the chart. Like Baseline count in MS Project.
To have the individual plans dependencies, resources, percent complete and disabled/locked state, list them in GanttTask.
The individual plans are defined by attributes below with the X replaced by a number.
For example GanttStartX can be GanttStart, GanttStart1, GanttStart2, GanttStart3, ...., GanttStart10
Default value 1 means one plan of main bars without the number, like GanttStart.
There is no limit of the plan count, there can be e.g. 1000 plans.
<C> <cell> string

GanttStartX

Gantt source - column name or exact value
Start date of the main bar, usually column name, but can be also date string (M/d/yyyy hh:mm:ss) or count of milliseconds.
If set to column, the column must be Type='Date'
If the start date is edited, the bar is moved.
upd 6.3 <C> <cell> string

GanttEndX

Gantt source - column name or exact value
Due date of the main bar, usually column name, but can be also date string (M/d/yyyy hh:mm:ss) or count of milliseconds.
If set to column, the column must be Type='Date'
The end date can be last date or last unit, depending on GanttLastUnit setting (new in 6.3).
When the GanttEnd date is empty (or the column value it points to), the milestone is displayed instead of main bar.
If the end date is edited, the bar is resized.
upd 6.3 <C> <cell> string

GanttDurationX

Gantt source - column name or exact value
Duration between start date and end date in GanttDataUnits. Can be column name or float or string.
The length can contain also unit modifier set by GanttDataModifiers, for example one day is usually 1d or 8h or 0.2w (new in 6.3).
When the GanttDuration value is empty or 0 (or the column value it points to), the milestone is displayed instead of main bar.
For milestone and GanttDuration as column is the value set to empty or 0 according to CanEmpty value regardless on cell type.
If set GanttStart and GanttEnd, the GanttDuration is calculated from them and ignores its value.

The duration is always in work time, without excluded dates.
To display duration in full time, just as end - start, don't use GanttDuration attribute, but define calculated column instead, for example:
<C Name="DurFull" Formula="!End||!Start?0:(End-Start)/1000/60/60/24" CanEdit="1" OnChange="var val = Grid.CheckGantt(Row,'End',Get(Row,'Start')+Get(Row,'DurFull')*1000*60*60*24); if(val!==false) Grid.SetValue(Row,'End',val,1)"/> defines duration in days (day = 1000*60*60*24 ms), where "Start" and "End" are column names for GanttStart and GanttEnd. To mark the cell as Changed if modified by change in Gantt add it to CalculatedChanges.
new 10.0 <C> <cell> string

GanttPartsX

Gantt source - column name or exact value
Discrete parts of the main bar, can be column name or direct value. If set to column, the column must be Type='Date' Range='1'.
The format is standard TreeGrid date range as "start1~end1;start2~end2;start3~end3;...", where the start and end can be (date string (M/d/yyyy hh:mm:ss) or count of milliseconds.
The end date of range can be exact last date or last unit, depending on GanttLastUnit setting.
If not defined, the main bar cannot contain more discrete parts and the value is read from GanttStart, GanttEnd and GanttDuration attributes.
If set the GanttParts, it calculates and sets automatically the GanttStart, GanttEnd and GanttDuration.
It can define also milestones, start milestone as "d1~" and end milestone by "~d2". Setting one date without the separator '~' defines bar with duration one GanttDataUnits.
For example "1/1/2000~1/10/2000;1/12/2000~;1/14/2000;~1/16/2000" defines one bar 1/1-1/10, one start milestone at 1/12, one bar 1/14-1/15 and one end milestone at 1/16
Since 10.0. it replaces the GanttFlow.

Task

Main bar as Gantt task attributes
Used only if the main bar plan is listed in GanttTask
Main bar as task can have also dependencies and resources

chg 10.0 <C> <cell> string

GanttCompleteX

Gantt source - column name or exact value
% of completion (0 - 100) of the task, can be column name or float.
(Since 10.0) Used only if the main bar plan is listed in GanttTask
new 10.0 <C> int

GanttRoundComplete

[0]
If the percentage complete will be rounded to specified units (1 - GanttUnits, 2 - GanttDataUnits) when entering it by SetGanttPercent.
Affects Main bar and Run. See also GanttExcludeComplete to round the percentage complete to workdays.
Setting it also restricts to have boxes incomplete by very small amount (due not precise setting of the percentage complete).
new 10.0 <C> <cell> string

GanttManualX

Gantt source - column name or exact value
Manual start date of the main bar, can be column name or direct value.
Used as minimal start date when correcting dependencies, the task is never moved before this date when correcting dependencies.
It is changed to main bar start date whenever the main bar is manually moved or resized by a user or by API.
Used only if the main bar plan is listed in GanttTask
new 10.0 <C> int

GanttManualChange

[2]
How the GanttManual will be changed when moved or resized the task.
0 - Never displayed, changed, used.
1 - Displayed and used, but never automatically changed.
2 - Changed only if defined as column.
3 - Changed also when defined as attribute.
4 - Like 3 and if empty it is set to the task start date.
new 10.0 <C> int

GanttManualSide

[2]
Where the GanttManual lock will be placed and used. 0 - bar left side (start), 1 - bar right side (end), 2 - like GanttDirection, 3 - opposite to GanttDirection.
Note, the attribute is used also for Run bars.
new 10.0 <C> <cell> int

GanttDisabledX

Gantt source - column name or exact value
If the main bar is disabled or locked.
0None.
1Disabled. Disabled bar is colored gray and its dependencies are inactive. If set GanttEditDisabled='0', it cannot be changed by a user.
2Locked. Locked bar cannot be moved when correcting dependencies. If set GanttEditDisabled='0', it cannot be changed by a user. Ignored when calculating critical path.
Used only if the main bar plan is listed in GanttTask
new 10.0 <C> bool

GanttEditDisabled

[0]
If the disabled or locked bar can be moved, resized, changed and dependencies can be attached to it by a user.
new 10.0 API method object

DisableGanttMain

(TRow row, string col, int plan, int disable)
Disables, locks or enables the main bar, sets the GanttDisable value.
plan is number of plan, 0 for base main plan. See GanttCount.
disable = 0 - enable / unlock, 1 - disable, 2 - lock

Edit

Special attributes for editing main bar

renamed 6.0 upd 10.0 <C> <cell> string[ ]

GanttEdit

["all"]
Which Gantt objects can be edited / moved / changed / deleted / added by user. Comma separated list of flag names, case insensitive.
It does not affect editing values in the source cells - use standard attributes like CanEdit to restrict source cell editing.
MainMain bars and milestones can be created, deleted and modified directly in Gantt chart. Since 10.0 individual actions can be set by MainMove, MainResize (resize+split), MainNew (add+delete), MainComplete, MainText, MainState (disable, lock).
MainXSince 10.0 it can contain also the Main1, Main2, Main3, ... MainX, the individual actions can be set by MainXMove, MainXResize (resize+split), MainXNew (add+delete), MainXComplete, MainXText, MainXState (disable, lock).
For editing other Gantt objects see GanttEdit full description.
new 6.5 <C> bool

GanttEditStartMove

[1]
If set to 0, editing start resizes the task (preserves end and changes duration).
If set to 1, editing start moves the task (changes end and preserves duration).
new 13.3 <C> bool

GanttEditSoleDuration

[0]
If permitted entering duration if no start and end date is set.
Useful when entering values for new tasks starting by duration.
new 10.0 <C> <cell> int

GanttJoinX

[1]
By default, when set to 1, the overlaid and adjacent parts are automatically merged to one part.
When set to 0, the main bar can contain adjacent parts and parts cannot be moved or resized through another part.
When set to -1, the main bar can contain adjacent and also overlaid parts, the parts can be moved or resized through another part.
If set GanttJoin to 0 or -1, the main bar should not be editable by calendar, because it does not support adjacent or overlaid parts.
Since 10.0 it replaces the GanttFlowJoin.
new 10.0 <C> <cell> int

GanttMilestonesX

[1]
If new milestones can be created in the main bar plan. Note, it differs from run bar GanttRunMilestones attribute.
0 - no, 1 - yes, 2 - only milestones
new 15.1 <C> <cell> bool

GanttNoMilestonesX

[0]
If set, it never shows milestones for main bar, rather shows narrow bar that can be resized by dragging.
If set, it is not possible to delete main bar by resizing it to zero width - the zero width bar is created in this case.
new 13.3 <C> bool

GanttDifferMilestones

[1]
If start milestones (defined by GanttStart) and end milestones (defined by GanttEnd) behave differently on edges of excluded dates.
If set to 1, the start milestones cannot be placed to start of excluded dates and end milestone cannot be placed to end of excluded dates.
Affects dragging and also moving tasks by correcting dependencies.
new 6.1 <C> int

GanttResizeDelete

[1]
If the Main and Run bars can be deleted by resizing them to zero width.
0 - the box cannot be deleted by resizing. Both the run box and the main bar can be resized to one unit width.
1 - if the box is resized to zero width, it is deleted.
2 - if the box is resized to zero width, it shows confirm message and is deleted if confirmed, otherwise original state is restored.
new 9.0 <C> int

GanttResizeBeforeMove

[2]
If resizing the Main and Run bars is accessible even if another object is above the bar.
For 0 it moves the object above, for 1 it resizes the bar under, for 2 it resizes the bar only under icon (e.g. flag, point, milestone or constraint), otherwise it moves the bar above.
new 15.1 <C> int

GanttMinResize

[0]
If set, the main bar narrower than this value cannot be resized by dragging.

Text

Main bar HTML content and side HTML

new 6.0 <C> <cell> string

GanttTextX

Gantt source - column name or exact value
Text for the main bar. It can be displayed inside the bar set as *Text* in GanttHtml, next to the bar in GanttHtmlLeft / GanttHtmlRight or as tooltip in GanttTip.
For milestone it can be displayed next to the milestone set as *Text* in GanttHtmlLeft / GanttHtmlRight or as tooltip in GanttMilestoneTip.
new 10.0 <C> <cell> string

GanttHtmlX

Main bar html content. It can contain any HTML code to display inside the main bar(s).
It can also show values from other cells in row, set by *col* where col is the column name.
It can show also the specials: *Text* - the GanttText, *Plan* - the plan index from 0, the plan 0 name is defined in Text.xml as Plan0,
*Index* - the bar index inside cell from 1, *Start* - start date of the bar, *End* - end date of the bar, *Duration* - length of the bar,
*StartAll* - start date of the whole bar, *EndAll* - end date of the whole bar, *DurationAll* - length of the whole bar,
*Resources* - actual resources assigned to the bar.
Example: "*Start* - *End*<br>*Text*"
To have custom background defined by the html set also GanttClass='Html' to disable default box background.
new 9.1 chg 10.0 upd 16.0 API event string

OnGetGanttHtml

(TGrid grid, TRow row, string col, int width, int comp, int crit, int plan, int index, string txt, int left, int maxwidth, string[ ] cls, bool export)
Called to get the main bar html content to render it. It can return any HTML code or text. Used for GanttHtml.
width is actual width of the bar outer tag in pixels, it is wider than the space for the HTML.
comp is percent complete
crit is 0 for normal bar, 1 for critical bar, 2 for error bar.
plan (new 10.0) is a number of plan, from 0. (0 = GanttStart, 1 = GanttStart1, 2 = GanttStart2 ... ). See GanttCount.
index (new 10.0) is an index of main bar part, from 0.
side (new 10.0) is 0 for inner html (GanttHtml), 1 for left side (GanttHtmlLeft), 2 for right side (GanttHtmlRight)
txt (new 10.0) is predefined HTML content to be shown in the bar.
left (new 10.0) is left position of the bar inside the Gantt cell (or in horizontal Gantt page), in pixels.
maxwidth (new 10.0) is actual width of the Gantt cell (or horizontal Gantt page), in pixels.
cls (new 11.0) contains CSS classes to be set to the bar. Items of the array are intended to change in this handler to specify the CSS classes for the bar.
export (new 16.0) is set when exporting to xlsx.
[GanttClass, OutClass, InClass, TextClass] - GanttClass is the actual GanttClass value. It is the only item preset in this array and the only partial class.
OutClass - full css class(es) added to the outer box. InClass - full css class(es) added to the inner box, TextClass - full css class(es) added inside incomplete bar
The height of the box is set according to its content height except is set GanttHeight.
new 10.0 <C> <cell> string

GanttHtmlDateFormat

Date format for GanttHtml, GanttHtmlLeft and GanttHtmlRight values *Start*, *End*, *StartAll*, *EndAll*
new 10.0 <C> <cell> string

GanttHtmlLeftX

[""]
Html text displayed on left side of the bar. Right aligned.
It can contain the same special settings like GanttHtml.
new 10.0 <C> <cell> int

GanttHtmlLeftEdgeX

[0]
Where the GanttLeftSide text will be displayed
0 - before the first box, 1 - before every box, 2 - inside every box next to right edge, 3 - centered inside every box, 4 - centered in every box, but left side to milestone.
5 - before the first box from all main bar plans, 6 - before the first box from all main bar plans and run boxes
new 10.0 <C> <cell> string

GanttHtmlLeftClassX

CSS class used to display the side text.
There are predefined 17 classes for all basic background colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow. The 10 underlined colors are defined also for milestones and dependency lines.
There is also predefined class None for HTML without any formatting, especially without padding.
For custom classes you need to define CSS class GxGanttHtmlXXX, where XXX is the value set to this attribute and Gx is the style prefix.
new 10.0 <C> <cell> string

GanttHtmlRightX

["*Resources*"]
Html text displayed on right side of the bar. Left aligned.
It can contain the same special settings like GanttHtml.
By default it shows GanttResources.
new 10.0 <C> <cell> int

GanttHtmlRightEdgeX

[0]
Where the GanttRightSide text will be displayed
0 - after the last box, 1 - after every box, 2 - inside every box next to left edge, 3 - centered inside every box, 4 - centered in every box, but right side to milestone.
5 - after the last box from all main bar plans, 6 - after the last box from all main bar plans and run boxes
new 10.0 <C> <cell> string

GanttHtmlRightClassX

CSS class used to display the side text.
There are predefined 17 classes for all basic background colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow. The 10 underlined colors are defined also for milestones and dependency lines.
There is also predefined class None for HTML without any formatting, especially without padding.
For custom classes you need to define CSS class GxGanttHtmlXXX, where XXX is the value set to this attribute and Gx is the style prefix.
new 10.0 <C> <cell> string

GanttHtmlShiftX

[""]
Vertical shift in pixels of the Left and Right side Html inside cell. Negative top, positive bottom.
It is possible to use it to display some text also above the box.
new 10.0 <C> int

GanttShowHtml

[1]
If the side html (GanttHtmlLeft and GanttHtmlRight) will be displayed in chart.
For 0 the side html will be hidden.
For 1 the side html will be shown, but the chart will not resize to show them.
For 2 reserved
For 3 the side html will be shown and the chart will resize to show them if required, like for the other Gantt objects. Can remarkably slow down large charts!
new 10.0 upd 16.0 API event string

OnGetGanttSideHtml

(TGrid grid, TRow row, string col, int width, int comp, int crit, int plan, int index, string txt, int side, bool export)
Called to get the main bar side html to render it. It can return any HTML code or text. Used for GanttHtmlLeft and GanttHtmlRight.
width is actual width of the bar outer tag in pixels.
comp is percent complete.
crit is 0 for normal bar, 1 for critical bar, 2 for error bar.
plan is a number of plan, from 0. (0 = GanttStart, 1 = GanttStart1, 2 = GanttStart2 ... ). See GanttCount.
index is an index of main bar part, from 0.
txt is predefined HTML content to be shown in the bar.
side is 1 for left side (GanttHtmlLeft), 2 for right side (GanttHtmlRight).
export (since 16.0) is set when exporting to xlsx.
new 15.1 <C> int

GanttHtmlHover

[0]
If the side html will be available for dragging, mouse events and tip. Used for all main bar plans.
0 - no, the side html will be inactive, 1 - yes, and the bar can be move by dragging the html. If added value 4, the html will be highlighted during dragging the main bar.
It will be possible to show e.g. different tip for the side html using OnGanttTip and testing XY.MainIcon (0 none, 1 left icon, 2 right icon, 3 left text, 4 - right text). Values 1, 2 are set for GanttIconsHover.

Tip

HTML shown on mouse hover the bar

renamed 10.0 <C> <cell> string

GanttTipX

Tip shown on mouse hover the main bar, but not milestone. It can contain HTML code.
Since 10.0 renamed from GanttMainTip.
It can contain the same special settings like GanttHtml.
To dynamically generate the tip text use OnGanttTip API event.
new 6.4 chg 10.0 <C> <cell> string

GanttMilestoneTipX

Tip shown on mouse hover the milestone, similar to GanttTip.
Since 10.0, if not set, used GanttTip.
new 10.0 <C> <cell> string

GanttTipDateFormat

Date format for GanttTip values *Start*, *End*, *StartAll*, *EndAll*
new 6.4 deleted 10.0 <C> <cell> string

GanttMainTip

Renamed to GanttTip.

Position

Vertical position and size

new 10.0 <C> <cell> int

GanttTopX

Vertical position in pixels of the bar inside its cell. To display the different main bars on different vertical levels.
Default value is used according to actual TreeGrid CSS style, usually 1 pixel.
Top position of milestone is calculated as (GanttHeight - milestoneheight) + GanttTop, where milestoneheight is defined in style Grid.css.
new 10.0 <C> <cell> int

GanttHeightX

Inner height of the bar in pixels.
Default value is calculated according to the box content. Minimal default value is read from actual TreeGrid CSS style, usually 9 pixels.
Remember, it affects the bar background and the side icons if used.
new 10.0 <C> int

GanttMilestoneTopMin

[0]
Minimal top position of milestones in Gantt.
Useful to set to permit or restrict negative milestone position if the milestone is higher than bars.
new 15.1 <C> int

GanttMinWidth

[6]
Minimal width of the main bar in pixels. The main bar will be rendered at least wide as the minimal width.

Style

Shape, color and side icons

chg 10.0 <C> <cell> string

GanttClassX

The custom prefix for all CSS classes of main bars and milestones. Case sensitive.
The CSS classes with the custom prefix are added to the base class and are intended to change color or shape of the main bars and milestones for particular rows.
There is one predefined black and white class Group for various purposes, e.g. grouped rows.
There are special classes: None (since 9.3) - no border, no padding, no margin, no background, Void (since 10.0) - transparent border, no background, Html (since 10.0) - no background.
There are 17 predefined classes for bars in all 17 base colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Orange, Purple, Red, Silver, Teal, White, Yellow. The 10 underlined colors are defined also for milestones and dependency lines.
You can easily add or update the Gantt classes in the Grid.css file.
Remember, before the class is always added "GxGantt" as style prefix. Before 10.0. there was added only "Gx" prefix!
Before 10.0 this attribute was used for all Gantt objects in the cell, since 10.0 it was replaced by individual attributes GanttFlagsClass, GanttPointsClass, GanttMarkClass, GanttConstraintsClass. For Run it was removed completely, use the Class of GanttRun or OnGetGanttRunClass event.
new 10.0 <C> <cell> string

GanttMilestoneClassX

The custom prefix for all CSS classes of milestones. Case sensitive. If not set, used GanttClass.
The CSS classes with the custom prefix are added to the base class and are intended to change color or shape of the main bars and milestones for particular rows.
There is one predefined black and white class Group for various purposes, e.g. grouped rows.
There are 17 predefined classes for milestones in (only) 10 base colors: Aqua (Teal), Black (Gray), Blue (Navy), Fuchsia (Purple), Green, Lime, Orange, Red (Maroon), Silver (White), Yellow (Olive).
Remember, before the class is always added "GxGantt" as style prefix. Before 10.0. there was added only "Gx" prefix!

It can be used also to define custom milestone icon. For example set GanttMilestoneClass="Test" and if used White style, define CSS:
.GWGanttTestMilestone { background:url(Test.gif) no-repeat; } .GWGanttTestMilestoneHover { background:url(TestHover.gif) no-repeat; }
renamed 6.0 upd 10.0 <C> <cell> int

GanttIconsX

[0]
If and what icons are shown on left and / or right side of the task.
0 - no icons
1 - standard summary icons on both outer sides, defined in selected CSS style (outer)
2 - left outer custom icon defined by GanttIconLeft
3 - right outer custom icon defined by GanttIconRight
4 - both outer custom icons defined by GanttIconLeft and GanttIconRight
5 - (new 10.0) standard summary icons on both outer sides of bars and interrupt icons on inner sides of bars (outer + inner)
6 - (new 10.0) standard interrupt icons on inner sides of bars (inner)
7 - (new 10.0) both custom icons defined by GanttIconLeft and GanttIconRight on both outer and inner sides of all bars
It is just visual effect.
new 9.2 <C> <cell> string

GanttIconLeftX

Left custom icon shown when set GanttIcons = 2 or 4.
It is direct url of the icon. If relative, it is relative to the main page shown in browser.
new 9.2 <C> <cell> int

GanttIconLeftShiftX

[-10]
Shift of the left custom icon to the left edge of the bar. In pixels. Can be negative, positive or zero.
new 12.0 deleted 15.1 <C> <cell> int

GanttIconLeftWidthX

[20]
Width of the left side icon in pixels. Used only for GanttIconsHover
new 9.2 <C> <cell> string

GanttIconRightX

Right custom icon shown when set GanttIcons = 3 or 4.
It is direct url of the icon. If relative, it is relative to the main page shown in browser.
new 9.2 <C> <cell> int

GanttIconRightShiftX

[-10]
Shift of the right custom icon to the right edge of the bar. In pixels. Can be negative, positive or zero.
new 12.0 deleted 15.1 <C> <cell> int

GanttIconRightWidthX

[20]
Width of the right side icon in pixels. Used only for GanttIconsHover
new 12.0 chg 15.1 <C> int

GanttIconsHover

[0]
If the side icons will be available for dragging (since. 15.1), mouse events and tip. Used for all main bar plans.
0 - no, the side icons will be inactive, 1 - yes, and the bar can be move by dragging the icon, 2 - yes, and the bar can be resized by dragging the icon, 3 - yes, like 2, but the bar cannot be resized by dragging its edges.
If added value 4, the icons will be highlighted during dragging the main bar.
If set, the mouse over event will be generated also if mouse moves between the bar side icon and the bar itself.
It will be possible to show e.g. different tip for the side icon using OnGanttTip and testing XY.MainIcon (0 none, 1 left icon, 2 right icon, 3 left text, 4 - right text). Values 3, 4 are set for GanttHtmlHover.
new 10.0 <C> bool

GanttAdjacentBars

[0]
By default the adjacent Main and Run boxes have few pixels between for just visual effect. If set GanttAdjacentBars='1', the adjacent boxes have no visible space between them.
new 13.2 <C> int

GanttCenter

[1]
If and how the Flags, Points and main bar milestones will be centered.
0 - no, left side of the icon is placed to the exact date, 1 - yes, center of the icon is placed to the exact date, 2 - yes, center of the icon is placed to center of the GanttUnits unit.
It is not used in GanttUnits months and years.

API

Controlling main bar by JavaScript
Some other API methods and events are also listed in individual features above in this document

new 10.0 API method object

GetGanttMain

(TRow row, string col, int plan)
Returns parsed main bar as two dimensional array of individual parts [[start1,end1],[start2,end2],[start3,end3],...].
For continuous bar the array contains only one item.
The start and end are dates in milliseconds since 1/1/1970. To get duration of the part in units use DiffGanttDate API method.
Milestone has the fifth item set as 1 for start milestone or 2 for end milestone, like [[start1,end1,null,null,1/2],...].
The returned object contains also properties StartDate and EndDate as the first and last date of the main bar in milliseconds.
plan is number of plan, 0 for base main plan. See GanttCount.
new 10.0 API method object

SetGanttMain

(TRow row, string col, int plan, object main)
Saves the parsed main bar back to the Gantt cell and updates the chart.
plan is number of plan, 0 for base main plan. See GanttCount.
Updates cells GanttStart, GanttEnd, GanttDuration, GanttParts and GanttManual.
new 10.0 API event object

OnGanttMainChange

(TGrid grid, TRow row, string col, int plan, object new, object old, string action)
Called before changed any main bar date or duration, by dragging or by editing.
To catch changed completion state or bar text use standard OnGanttChange API event instead.
plan is number of plan, 0 for base main plan. See GanttCount.
new is main object to be set, the format is the same as returned GetGanttMain method.
old is original main object that will be changed.
action is the action lead to the change, can: be Resize, Move, New, Delete, DeleteAll, Correct.
When creating new box by dragging, it is called twice, once on start dragging, for one unit bar and second after finish resizing the new bar.
Return true to suppress the change.
Return new main object or modified new or old object to be set instead of the new.
new 10.0 API event void

OnGanttMainChanged

(TGrid grid, TRow row, string col, int plan, object new, object old, string action)
Called after changed any main bar date or duration, by dragging or by editing.
To catch changed completion state or bar text use standard OnGanttChanged API event instead.
plan is number of plan, 0 for base main plan. See GanttCount.
new is main object actually set, the format is the same as returned GetGanttMain method.
old is original main object that was changed.
action is the action lead to the change, can: be Resize, Move, New, Delete, DeleteAll, Correct.
When creating new box by dragging, it is called twice, once on start dragging, for one unit bar and second after finish resizing the new bar.

Actions

Interactive main bar

new 7.0 <Actions>

MoveGanttMain

Attached to OnRightDragGantt, cannot be attached anywhere else
Moves main bar part by mouse dragging.
Fails, if mouse is not above main bar or main bar cannot be moved.
new 10.0 <Actions>

MoveGanttMainAll

Not attached to any event, can be attached to OnDragGantt
Moves whole main bar by mouse dragging.
Fails, if mouse is not above main bar or main bar cannot be moved.
new 10.0 <Actions>

MoveGanttMainFirst

Attached to OnDragGantt, cannot be attached anywhere else
If dragged the first main bar part, moves whole main bar.
If dragged other main bar part, moves only this main bar part.
new 7.0 <Actions>

ResizeGanttMain

Attached to OnDragGantt, cannot be attached anywhere else
Resizes main bar part by mouse dragging
Fails, if mouse is not above main bar edge or main bar part cannot be resized
new 7.0 upd 10.0 <Actions>

CreateGanttMain

Not attached to any event, can be attached to OnDragGantt
Creates new main bar by mouse dragging.
Fails, if there is already one main bar in the cell or main bar cannot be created here
Since 10.0 it is not attached to OnDragGantt, it was replaced by CreateGanttBar.
new 10.0 <Actions>

CreateGanttBar

Attached to OnDragGantt, cannot be attached anywhere else
Creates new main or run bar. It creates the one that can be created. It chooses the bar to create according to the y axis.
If more new bars can be created on actual position, it chooses them in this order: main, main1, main2, ..., mainX, run.
<Actions>

DeleteGanttMain

Attached to OnCtrlClickGantt event
Deletes Main bar or Milestone if it is under mouse cursor.
It fails if there is neither Main bar nor Milestone under mouse cursor.
The main bar can be deleted also by resizing to zero width, if permitted by GanttResizeDelete.
new 10.0 <Actions>

DisableGanttMain

Not attached to any event
Disables or enables Main bar or Milestone if it is under mouse cursor.
It fails if there is neither Main bar nor Milestone under mouse cursor.
new 10.0 <Actions>

LockGanttMain

Not attached to any event
Disables or enables Main bar or Milestone if it is under mouse cursor.
It fails if there is neither Main bar nor Milestone under mouse cursor.
<Actions>

SetGanttPercent

Attached to OnCtrlRightClickGantt event
Changes % of completed to position under mouse cursor.
It fails if mouse is not above Main bar.
new 7.0 <Actions>

EditGanttPercent

Attached to OnShiftRightClickGantt event
Lets a user to edit percentage completion of main bar or milestone under mouse cursor
new 6.0 <Actions>

EditGanttText

Attached to OnDblClickGantt event
Lets a user to edit tooltip text of main bar or milestone under mouse cursor.
chg 10.0 <Actions>

NewGanttMilestone

Attached to OnDblClickGantt event
Adds new start milestone or run milestone. It creates the one that can be created. It chooses the bar to create according to the y axis.
If more new bars can be created on actual position, it chooses them in this order: main, main1, main2, ..., mainX, run.
Before 10.0 its functionality was the same as NewGanttStartMilestone.
new 10.0 <Actions>

NewGanttStartMilestone

Not attached to any event
Adds new start milestone on mouse position
new 7.0 <Actions>

NewGanttEndMilestone

Not attached to any event
Adds new end milestone on mouse position.
new 10.0 <Actions>

SplitGanttMain

Attached to OnShiftClickGantt event
Splits main bar under mouse cursor on actual position to two parts.
deleted 7.0 <Actions>

DragGantt

Not attached to any event, cannot be attached elsewhere
Replaced by individual actions like MoveGanttMain.
deleted 7.0 <Actions>

DragGanttResize

Not attached to any event, can be attached to OnDragGantt only
Replaced by individual actions like ResizeGanttMain.
deleted 7.0 <Actions>

DragGanttNew

Not attached to any event, can be attached to OnDragGantt only
Replaced by individual actions like CreateGanttBar.
deleted 7.0 <Actions>

DragGanttMove

Not attached to any event, can be attached to OnDragGantt only
Replaced by individual actions like MoveGanttMain.

Deprecated side text

Since 10.0 replaced by GanttHtmlLeft / GanttHtmlRight.

new 6.4 deleted 10.0 <C> <cell> string[ ]

GanttFormat

[Resources]
Replaced by GanttHtmlLeft / GanttHtmlRight attributes.
Text(s) displayed right to GanttFormatObject object.
By default it displays GanttResources value.
It can display any HTML text. It can also show values from other cells in row, set by *col* where col is the column name.
For example: GanttFormat="$<span style='color:#77F'>*P*</span> *R*" => shows value from P column (as price) and from R column (as resources).
It is one string if GanttFormatObject contains one item, or more strings first character separated if GanttFormatObject contains more items.
new 9.1 deleted 10.0 API event string

OnGetGanttFormat

(TGrid grid, TRow row, string col, string text)
Replaced by GanttHtmlLeft / GanttHtmlRight attributes.
Called to get GanttFormat value dynamically.
The text is original value of GanttFormat. Return new HTML value or text.
The returned is next processed like the GanttFormat attribute, the *col* names are replaced by the values.
new 7.0 deleted 10.0 <C> <cell> int[ ]

GanttFormatWidth

Replaced by GanttHtmlLeft / GanttHtmlRight attributes.
Expected width in pixels of the text(s) displayed by GanttFormat.
Set this value to speed up Gantt chart creating (especially for Paging), to use this value instead of measuring width of the GanttFormat.
This width is reserved when calculating the whole chart width to completely show the GanttFormat text.
It is one integer if GanttFormatObject contains one item, or more integers comma separated if GanttFormatObject contains more items.
new 6.4 deleted 10.0 <C> string[ ]

GanttFormatObject

["Last"]
Replaced by GanttHtmlLeft / GanttHtmlRight attributes.
Object next to the GanttFormat text will be displayed.
Last - the object from Main, Flow and Run positioned rightmost.
First - (since 9.1) the object from Main, Flow and Run positioned leftmost.
Object - GanttTask object (the first one, if there are more objects)
Main, Main, Main1, Main2,... Main10, Run - only for this object
If the selected object is not present in the cell, the text is not shown.

Since 9.1 it can contain more object names, comma separated. And there will be printed more texts, one text per one object.
In this case the GanttFormat contains more strings, first character separated. And GanttFormatWidth can contain more values, comma separated.
Since 9.1 the object name can contain suffix to specify position of the text: Prev (before box), Left (on the box, left side), Right (on the box, right side), Next (right next to the box, default position).
For example: "MainPrev,MainNext,FlowLeft" will print three texts from GanttFormat, one before main bar, one after main bar and one into flow bar from left edge.

Real Flow

Real process of planned task - one or more discrete bars with the same meaning
Since 10.0. replaced by Main bar Parts

Defined by GanttFlow (date ranges).
It is one task divided to one or more discrete parts. Adjacent parts are merged to one part except set GanttFlowJoin='0'.
It can be discrete, can contain more date ranges. The first and last date in range are separated by tilde (~), ranges itself by semicolon (;).
<C> <cell> string

GanttFlow

Gantt source - column name or exact value
Real flow times, can be column name or date range string "d1~d2;d3~d4;d5;..." (date string (M/d/yyyy hh:mm:ss) or count of milliseconds).
These dates extend the displayed date range in chart when needed.
The end date of range can be last date or last unit, depending on GanttLastUnit setting.
new 6.4 <C> <cell> string

GanttFlowComplete

Gantt source - column name or exact value
% of completion (0 - 100) of the task, can be column name or float.
When set, the flow replaces the main task! It should not be used with main task!
This attribute is intended to use when the main task should be able to contain more parts, to replace it by Flow.
Remember, to attach dependencies to Flow instead of main task you need to set GanttTask='Flow'.
It is possible also to define milestone as range with only one part and with the range separator,
for example "1/1/2000~" is start milestone, "~1/1/2000" is end milestone and "1/1/2000" is standard bar part one unit wide.
Since 7.0 for calculating summary of the GanttFlow can be used ganttpercent Formula function.
new 7.0 <C> <cell> int

GanttFlowJoin

[1]
By default, when set to 1, the overflowed and adjacent parts are automatically merged to one part.
When set to 0, the Flow can contain adjacent part and parts cannot be moved or resized through another part.
When set to -1, the Flow can contain adjacent and also overflowed parts, the parts can be moved or resized through another part.
If set GanttFlowJoin to 0 or -1, the Flow should not be editable by calendar, because it does not support adjacent or overflowed parts.
new 6.0 <C> <cell> string

GanttFlowText

Gantt source - column name or exact value
Text displayed as tooltip when mouse hovers real flow bar.
new 6.4 <C> <cell> string

GanttFlowTip

Tip shown on mouse hover the flow bar. It can contain HTML code.
By default it shows the value of GanttFlowText.
It can also show values from other cells in row, set by *col* where col is the column name.
It can show also the specials: *Text* - show the GanttFlowText, *Start* - start date of the bar, *End* - end date of the bar, *Duration* - length of the bar, *Index* - the bar index (from 1).
Example: "*Index*. *Start* - *End*<br>*Text*"
new 9.1 API event string

OnGetGanttFlowHtml

(TGrid grid, TRow row, string col, int index, int width, int comp, int crit)
Called to get the flow bar HTML content to render it. It can return any HTML code or text.
index is the Flow bar index inside the Flow.
width is actual width of the bar outer tag in pixels, it is wider than the space for the HTML.
comp is percent complete or null if not set GanttFlowComplete.
crit is 0 for normal bar, 1 for critical bar, 2 for error bar.
If the handler returns something, the bar is always rendered as gray, without completion.
The height of the box is according to its content height.
new 7.0 formula string

sumflow

(string col = null, string condition = null, int type = 0, string server = null)
Sums all dates in column with Range=1 Type="Date". It just creates new range from all intervals and updates it to not contain duplicate value cross intervals.
The difference to sumrange is that sumflow is affected by GanttLastUnit.
For its attributes see sum function.
new 7.0 <Actions>

MoveGanttFlow

Attached to OnDragGantt, cannot be attached anywhere else
Moves one flow bar by mouse dragging.
Fails, if mouse is not above flow bar or the flow bar cannot be moved.
new 7.0 <Actions>

ResizeGanttFlow

Attached to OnDragGantt, cannot be attached anywhere else
Moves one flow bar by mouse dragging.
Fails, if mouse is not above flow bar edge or the flow bar cannot be resized.
new 7.0 <Actions>

CreateGanttFlow

Attached to OnDragGantt, cannot be attached anywhere else
Creates new flow bar by mouse dragging.
Fails, if flow bar cannot be created here.
<Actions>

DeleteGanttFlow

Attached to OnCtrlClickGantt event
Deletes one Flow bar under mouse cursor.
It fails if there is no Flow under mouse cursor.
new 7.0 <Actions>

NewGanttFlowMilestone

Attached to OnDblClickGantt event
Adds new Flow milestone defined by start on mouse position. There can be more milestones defined by Flow in one cell.
new 7.0 <Actions>

NewGanttFlowEndMilestone

Not attached to any event
Adds new Flow milestone defined by end on mouse position. There can be more milestones defined by Flow in one cell.
new 7.0 <Actions>

SetGanttFlowPercent

Attached to OnCtrlRightClickGantt event
Changes % of completed to position under mouse cursor.
It fails if mouse is not above Flow bar.
new 7.0 <Actions>

EditGanttFlowPercent

Attached to OnShiftRightClickGantt event
Lets a user to edit percentage completion of main bar or milestone under mouse cursor.
new 6.0 <Actions>

EditGanttFlowText

Attached to OnDblClickGantt event
Lets a user to edit tooltip text of real flow bar under mouse cursor.
new 9.2 <Actions>

SplitGanttFlow

Attached to OnShiftClickGantt event
Splits the flow bar under mouse cursor to two bars.