TreeGrid Gantt Chart Tutorial
12. Header, Background and Mark
Gantt header dates and formats and coloring dates and date ranges in chart
-
Header
-
GanttHeader1
- GanttHeader5 define up to 5 headers for the Gantt column.
The one line definition is "repeater#format#shift".
-
The repeater repeats the header value for every given unit like days or weeks, the possible repeater value is the same as GanttUnits, e.g "d" or "w".
-
The format is standard TreeGrid date format, used for Date type.
The format can be also standard TreeGrid number format, if repeater is number.
-
The shift is optional value to move the whole line to the left for given number of the repeater units. It is usually decimal value, to move for only part of the repeater.
-
By default are all header lines displayed in main TreeGrid header row.
To display the individual lines in other header rows, set appropriate
GanttHeaderId1
- GanttHeaderId5.
-
If the default formatting options does not fulfill your requirements, you can create the individual formatted items dynamically by API event
OnGetGanttHeader
.
-
By default are the incomplete header units (the first and the last) displayed normally with appended "...". To display only the "..." set GanttHeaderTrim='1'.
When some dates are hidden by GanttExclude, it is possible to display the nearest visible date in header by GanttHeaderRound1='1' (- GanttHeaderRound5='1').
-
Background
is defined by GanttBackground
attribute. The background is the same for all rows in grid.
The background format is "repeater1#date1a~date1b#classindex1;repeater2#date2a~date2b#classindex2;...".
-
The repeater repeats the header value for every given unit like days or weeks, the possible repeater value is the same as GanttUnits, e.g "d" or "w".
If the repeater is missing, only the exact date range is colored, without repeating.
-
The dateXa~dateXb is date range. These dates don't need to be inside chart range, they just need to specify the range inside one repeater unit.
-
The classindex is optional index for GxGanttBackX class to use for coloring. If not present, the item position in the background definition is used (from 1).
There are predefined 1-5 css classes for background by default, it is possible to define next classes like GxGanttBack6.
-
Foreground
is defined by GanttMark
attribute. It can be defined different for every row, it can be defined also by another column cells like any other Gantt object like main bar.
-
The GanttMark is shown above other Gantt objects, this behavior can be changed by GanttOrder attribute.
-
The Mark can contain individual dates or date ranges to color them in chart.
-
The Mark dates can be rounded by GanttMarkRound attribute.
-
The Mark dates can optionally contain suffix #classindex as optional index for GxGanttMarkX class to use for coloring.
There are predefined css classes 1 - 5 for Mark with full height as by default, it is possible to define next classes like GxGanttMark20.
-
The Mark can be used also as static box or line to mark something in chart. The Mark can be also calculated by Formula, e.g. to sum its children.
There are predefined css classes 6 - 8 for bottom boxes, 9 - 11 for top boxes and 12 - 14 for middle lines.
It is possible to similarly create next custom classes with different box position, color and height.