Gantt objects
TreeGrid documentation
The Gantt chart can be added to grid by defining column of type
Gantt (
<C Type='Gantt' ... />) and setting the other Gantt chart attributes.
The grid with Gantt column still supports all other functionality like normal grid (sorting, filtering, grouping, search, calculations, ...).
The Gantt chart is automatically created from the given values and is also automatically recalculated whenever some source value is changed.
The Gantt chart is also interactive, so a user can change the Gantt chart by mouse and it automatically updates the source data.
The Gantt chart sources are usually other columns where are stored the source data in cells. These cells can be also edited by a user and Gantt chart is automatically updated.
Predefined settings for Gantt column is in default column <D Name='Gantt'/>, defined in Defaults.xml.
Gantt objects list
The Gantt chart can show various objects, possibly all together in one cell:
Gantt bars
Resizable, movable, support dependencies, resources and percentage completion
Used as sources for Gantt chart calculations (e.g. correcting dependencies or calculate critical path)
Main bar & milestone | Base Gantt chart task. |
| One or more independent bars with different color, class, caption, tooltip and unique id. Supports also milestones. |
| 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. |
Run bar & milestone | Extended Gantt chart task or more independent tasks in one cell. |
| One or more independent bars with different color, class, caption, tooltip and unique id. Supports also milestones. |
| It supports also many options for moving and resizing the boxes. |
| Defined by GanttRun and optionally GanttRunStart. Or can be defined as summary of child main bars, see Editable Summary Run. |
| Can be used as complex planned task or more independent planned tasks. |
| Or can be used to define PERT chart. |
| Or it can be used for any other interactive bar chart. |
Gantt icons
Not resizable, but movable objects
Flag | One or more icons in the cell, on specified dates, with defined side text or tooltip. Supports custom icons and their changing. |
| Usually used to attach some information and icon to selected date(s). |
| Defined by GanttFlags. |
| Does not> affect any Gantt calculations, except width of the Gantt column. |
Point | One or more different movable bullets. With different icons, tooltip and edit permissions. |
| Used usually in math charts to display various points on specified positions. |
| Defined by GanttPoints. |
| Does not> affect any Gantt calculations, except width of the Gantt column. |
Static objects
Not movable, not resizable, completely inactive
Mark | One or more dates or date ranges to highlight them. Can be different in every row and also input by a user. |
| Defined by GanttMark. |
Local calendar | Gantt calendar - excluded dates (holidays). Marks these dates by different color. |
| It is used in all Gantt calculations and is also possible to restrict start / end Gantt objects in these ranges. |
| Defined by GanttCalendar. |
Global objects
Objects defined for the whole chart or between cells
Dependencies | Lines between two Gantt bars (Main or Run bars or their milestones). Even between different bars in one cell. |
| The dependencies set relation between the tasks and are used in Gantt chart calculation (e.g. correcting dependencies or calculate critical path) |
| The dependencies support edge type (ss,sf,fs,ff), lag and float. |
| The dependencies can be added, deleted and changed dynamically by mouse or keyboard. |
| Defined by GanttDescendants and / or GanttAncestors. |
Start line | Vertical line through all cells that specifies start of the whole project. It can be set, deleted or moved. |
| It is used in Gantt calculations, when correcting dependencies. It can work also as constraint. |
| Defined by GanttBase. |
Finish line | Vertical line through all cells that specifies end of the whole project. It can be set, deleted or moved. |
| It is used in Gantt calculations, when correcting critical path. It can work also as constraint. |
| Defined by GanttFinish. |
Header | One or more Gantt header (up to 5), can be placed above or below (or both) the Gantt chart in fixed rows. |
| Shows the individual dates in given format or numbers in math chart. |
| Defined by GanttHeader1 - GanttHeader5. |
Background | Background lines or rectangles vertically through all cells to mark and highlight some dates or date ranges in the chart. |
| Defined by GanttBackground. |
Global calendar | Gantt calendar - excluded dates (holidays). Marks these dates by different color. The dates can be also hidden from the chart. |
| It is used in all Gantt calculations and is also possible to restrict start / end Gantt objects in these ranges. |
| Defined by GanttExclude. |
Features
They are not visible objects, they are listed here just for completion
Resources | Information assigned to any Gantt bar (Main or Run bar or milestone). |
| Used for calculating task prices and Availability chart. |
| It is possible also to display resources chart as inner text, side text or tooltip for Gantt bar. |
| Defined by GanttResources. |
Critical path | Gantt chart can calculate slack value for all tasks and mark tasks on or beyond critical path. |
| The Gantt bar on critical path is highlighted. |
| Defined by GanttSlack. |
Summary tasks | Gantt chart can show various summary tasks calculated from their children. |
| The can be movable, resizable and with dependencies. |
| Defined by GanttSummary as Main bar or GanttRunSummary as Run bar. |
Zoom | Zoom levels, possible from milliseconds to years. Smooth zoom available. Zooming by mouse dragging or clicking to date. |
| Defined by GanttZoom. |
Menu | Popup menu for the Gantt cell with items available for the clicked Gantt object. |
| Defined by GanttMenu. |
API | Gantt supports also various API methods and events to control end extend the Gantt chart from JavaScript. |
Display settings
new 6.3 upd 10.0 <C> string
GanttOrder
["Chart,Availability,Constraints,Run,Main,Mark,Dependency,Flags,Points"]
Comma separated list of all Gantt objects to render, case insensitive.
The order of rendering the Gantt objects. The objects rendered later will overlay the previous objects in the same place.
The not listed Gantt objects are never rendered.
It affects also accessibility (interactivity) of the objects, they are accessible in
reversed order.
Since 10.0 it can contain also the next main bars keywords
Main1,
Main2,
Main3, ...,
Main10. If missing, these keywords are automatically added after Main keyword if increased
GanttCount.
new 10.0 <C> string
GanttTask
["Main"]
List of Gantt bars used as
Gantt tasks, comma separated, case insensitive.
The Gantt tasks can have assigned
dependencies and
resources, can have percentage
completion, can be
disabled or
locked and can have
manual constraint.
Permitted objects are | Main, Main1, Main2,... MainX for individual main bar plans. The whole main bar in one plan (not its individual Parts) is used as Gantt task. |
| All for all main bar plans. |
| Run for whole run bars. The whole Run is used as Gantt task. It should not be set with Box. |
| Box for individual Run boxes. Every Run box can be used as one Gantt task. The box must have set Id attribute to have assigned dependencies. It should not be set with Run. |
It replaces deleted GanttObject and GanttDependencyObjects attribute.
new 10.0 API method void
SetGanttTask
(string value, string col = null)
Changes
GanttTask value by JavaScript. Requires next
RefreshGantt ( ) call.
value is new value to set to GanttTask, col is Gantt column or null for the first Gantt column in grid.
new 6.4 deleted 10.0 <C> string
GanttObject
["Main"]
Replaced by
GanttTask.
Since 10.0 the dependencies and resources can be assigned to all Gantt tasks, not only to the first one in the cell.
new 10.0 chg 13.0 <C> int
GanttBottom
[css]
If set to some number (including 0), it updates row height to show all Gantt objects fully plus given pixels.
Since 13.0 if not set (default setting, changed from value 4 in
13.0) it is read from actual CSS style.
It is space in pixels reserved below Gantt objects.
It changes row
Height attribute value. The calculated height cannot be less than minimal row height and higher than row
MaxHeight.
It calculates the row height from:
Main bar or Run bar if it uses default height and position or if uses explicitly set height and position.
Main milestone and Run milestone position and default milestone height. See
GanttIconBottom.
Run bar placed by
OnGetGanttRunRect.
Overlaid Run bar if it is shifted by
GanttRunErrorsShift.
Flag, Point or Constraint position and default object height. See
GanttIconBottom.
It ignores:
If the Run or Main bar height is higher than default box height due its html content
The Main and Run bar side html
Set it to
empty string to
not update row height according to the Gantt objects height and position.
Incompatible with RowSpan for the Gantt cell.
new 10.0 chg 13.0 <C> int
GanttIconBottom
[css]
If it is not empty string, it is used instead of
GanttBottom for Gantt icons (Flag, Point, Constraint).
Since 13.0 if not set (default setting, changed from value 0 in
13.0) it is read from actual CSS style.
It is used only if set GanttBottom.
new 13.2 <C> bool
GanttPagingUpdateHeight
[1]
If the row height is updated for
GanttBottom even if the run boxes are outside Gantt page (for
GanttPaging).
It is applied only for run boxes, for other Gantt objects is the height updated always.
new 9.3 chg 13.0 <C> bool
GanttTextOverlay
[0]
For
0 it always shows all texts in Gantt through other objects (e.g. images or bar backgrounds).
For
1 it overlays the texts like any other Gantt objects by the next objects in the GanttOrder.
It can slow down bigger Gantt charts!
Since 13.0 If set to
1 it also renders background in <svg> to speed up the rendering.
Therefore the value
1 speeds grid with custom row calendars and / or with many colored exclude or background units.
But slows down Gantt with many main parts or run boxes per row.
new 10.0 <C> string[*]
GanttHoverIcons
A list of icons for hovering custom icons in Gantt chart - Main and Run milestones and stops, Flags, Points, Constraints
It is first character separated array of string pairs, the first string is replaced by the second string.
If more strings match the search, only the first string is replaced.
For example
"|Test.gif|TestH.gif|.gif|Hover.gif" replaces Test.gif by TestH.gif and Custom.gif by CustomHover.gif.
new 10.0 upd 11.0 <C> int
GanttDragLine
[1]
If there will be shown vertical line(s) when dragging Gantt object to better see the destination dates.
0 - no,
1 yes, but run only for slide,
2 yes, also on run move, left edge only,
3 (new 11.0) , yes, also on run move on both sides.
The line is not shown if set <Cfg ShowDrag='0'/>.
new 11.0 <C> int
GanttDragTip
[0]
If and how there will be shown tip for actual position when dragging Gantt object. Bit array.
1. bit | &1 | There will be shown start date when moving GanttRun. Only for move, not for slide. |
2-3. bit | &6 | There will be shown (2) start date or (4) end date or (6) both for moving any Gantt object. For moving icons and lines there is shown always only start date. |
4-5. bit | &24 | There will be shown (8) edge date (start or end) or (16) duration or (24) both for resizing any Gantt run box. |
new 11.0 <C> string
GanttDragTipDateFormat
[ ]
Date format to display start and end of the Gantt item in
GanttDragTip.
It is the same format as for
Date type.
new 11.0 <C> string
GanttDragTipDurationFormat
[ ]
Number format to display duration of the Gantt item in
GanttDragTip, the duration is shown in GanttDataUnits.
It is the same format as for
Float type.
new 11.0 API event string
OnGanttDragTip
(TGrid grid, TRow row, string col, string tip, object XY, int dir, int start, int end, int duration, int x, int y)
Called to get a tip text for Gantt object to display it on dragging like
GanttDragTip.
tip is the default tip text, return it or new tip.
XY are Gantt objects under mouse cursor on dragging start returned by
GetGanttXY.
start is actual start date in ms,
end is actual end date in ms,
duration is actual duration in ms.
end and
duration is null for GanttRun move.
dir is action:
1 resize left edge,
2 resize right edge,
3 move.
x is actual position in Gantt in pixels,
y is vertical position in pixels.
x and
y is set for GanttRun move only.
new 10.0 <C> int[3]
GanttShift
[3]
How will be shifted Gantt icon in case two same icons are on the same place or too near.
It can contains one or three values, comma separated as
[shiftX,shiftY,overX], e.g.
GanttShift="0,3,5" or
GanttShift="2".
shiftX - how much pixels will be shifted the next overlaid icon horizontally. It shifts the icons up to
shiftX pixels distant.
shiftY - how much pixels will be shifted the next overlaid icon vertically. It shifts the icons up to
overX pixels distant.
Affects Milestone (Main, Run), Flags, Points. For Run it works only if all the milestones are on the same vertical level. For Main it works only if the Parts are sorted by date.
new 10.0 <Cfg> int
TouchDragFocused
[2]
Only for touch screens. <Cfg> attribute!
If set to
1, it permits dragging only focused object (row, Gantt bar, Gantt icon or Gantt line).
If set to
2, permits dragging focused cell, not only focused row. Gantt is the same as for
1.
First tap on the object to focus it and next touch and move or resize it.
Similarly tap to empty space in Gantt chart and next touch and drag to create new bar.
It affects also showing Gantt menu - tap on the Gantt object and tap on it again to show the popup GanttMenu.
new 12.0 chg 12.1 <Cfg> int
TouchDragFocusedDependency
[2]
Only for touch screens. <Cfg> attribute!
If set to
1, it permits dragging dependency only from focused cell.
If set to
2, it permits dragging dependency only from focused Gantt bar or milestone.
First tap on the cell or object to focus it and next touch and move to create the dependency.
Since 12.1 the default value changed from 0 to 2.
new 10.0 <Cfg> int
TouchClearFocused
[0]
Only for touch screens. <Cfg> attribute!
Time in milliseconds; after that time the focus from actually focused cell or Gantt object is cleared.
0 means never.
Edit settings
renamed 10.0 upd 13.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.
All | All Gantt items are editable / movable. |
Main | Main bars and milestones can be created, deleted and modified directly in Gantt chart.
(new 10.0) Individual actions can be set by MainMove, MainResize (resize+split), MainNew (add+delete), MainComplete, MainText, MainState (disable, lock), MainCorrect (schedule). |
MainX | (new 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), MainXCorrect (schedule). |
Run | Run bars can be created, deleted and modified directly in Gantt chart.
(new 10.0) Individual actions for whole run can be set by RunMove (move+join), RunResize (resize+split), RunNew (add+delete), RunComplete, RunText (run text, type, tip, class), RunState (disable, lock, select), RunCorrect (schedule)
(new 13.0) Action for run container can be set by RunContainer
The Run can be more controlled by its attributes for moving and resizing. |
Flags | Flags can be created, deleted, moved and modified directly in Gantt chart. Since 10.0 individual actions can be set by FlagsMove, FlagsNew (add+delete), FlagsText (text+icon change). |
Points | (new 6.4) Points can be created, deleted, moved and modified directly in Gantt chart. Since 10.0 individual actions can be set by PointsMove, PointsNew (add+delete). |
Constraints | (new 6.3) Constraints can be created, deleted and moved directly in Gantt chart. Since 10.0 individual actions can be set by ConstraintsMove, ConstraintsNew (add+delete). |
Dependency | Dependency lines can be created, deleted or corrected directly in Gantt chart.
(new 10.0) Individual actions can be set by DependencyNew (create+delete), DependencyCorrect (moving related tasks, can be set individually also by MainCorrect, MainXCorrect and RunCorrect). |
DependencyTypes | (new 6.3) Dependency type can be set by dragging to different bar edge (ss,sf,fs,ff). It does not hover the dependency as editable. |
DependencyLags | (new 6.3) Dependency lag can be changed from menu. If set, dependency is hovered as editable, even if no other Dependency edit flag is set. |
Resources | Resources can be assigned or entered directly in Gantt chart. |
CriticalPath | (new 11.0) Provides slack and critical path calculation even for not editable chart. It is set also when <Cfg Editing="0"/>. |
For example
GanttEdit="Main,Main1Move,Main1Resize,Main2Move,Main2Complete,Run,FlagsMove,Constraints"
More control can be done by assigning actions to events. The default actions are attached in Defaults.xml:
OnDragGantt="ResizeGanttMain OR MoveGanttMainFirst OR ResizeGanttRun OR MoveGanttRun OR MoveGanttFlag OR MoveGanttPoint OR MoveGanttConstraint OR MoveGanttBase OR MoveGanttFinish OR CreateGanttBar OR DragGanttDependency"
To attach special set of actions to inividual Gantt cell, define
<I ... xxxOnDragGantt="....,1" ... />, where the xxx is name of your Gantt column. See ",1", it ensures to not run the default actions from Defaults.xml.
For example
<I ... GANTTOnDrag="MoveGanttMain OR MoveGanttConstraint OR MoveGanttBase OR MoveGanttFinish OR DragGanttDependency"/>,
permits only moving specified objects, but restricts resizing, deleting and creating new objects.
Remember, you can use
Default rows <D> to assign the same actions to more cells at once.
Use also
OnCheckGantt event to control changes done by direct editing in source cells.
Use also
GanttMenu to specify popup Gantt menu items for given cell.
new 6.3 upd 7.0 <C> int
GanttCheck
[4]
Check if Gantt source cell change by a user edit is correct.
0 - do nothing
1 - restrict incorrect changes
2 - alert warning and restrict incorrect changes
3 -
(new 7.0) automatically correct incorrect values
4 -
(new 7.0) alert warning and correct incorrect values
It checks all dates to be within constraints, circular dependencies, percentage complete, negative duration, End>Start
To set value to Gantt source cell by API use:
val = grid.CheckGantt(row,col,val); if(val!==false) grid.SetValue(row,col,val,1);
new 7.0 <C> int
GanttCheckTime
[1000]
Time in milliseconds, how long will be displayed alert message for
GanttCheck = '2' and '4'.
If set to
0, the message will be shown forever with OK button.
If set to
1, standard browser alert will be shown.
If set to negative number, the message will be shown for the (positive) time, but with OK button.
renamed 6.0 <C> <cell> int
GanttHover
[1]
If the Gantt items under mouse cursor will be highlighted.
0 - never,
1 - only when it is editable / movable,
2 - always
<Actions>
DeleteGanttAll ...F
Not attached to any event
Deletes all Gantt items from the actual or focused Gantt cell, including all dependencies.