1. Header, Background and Mark

Gantt header dates and formats and highlighting dates and date ranges in chart

• Header

  Gantt column can contain up to 5 different headers defined by

  GanttHeader1

  - GanttHeader5 attributes.
  See documentation for Gantt Header.
  • The header line format 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

    .
    In this event it is possible also to highlight some header cells by background or other CSS attributes by returning the cell value in appropriate <div>.
  • 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').
  • If the Headers together contain too many units you will get debug message "Too many units in Gantt column header" and the headers are not rendered fully.
    In this case define wider Header units in the repeater, or decrease the Gantt column width by using different zoom or use Gantt paging (GanttPaging='1') and page the header(s) by GanttHeaderPaging1 - 5 attributes.
    The limit is 10000 units for all headers together and is set by GanttHeaderMaxUnits. This limit can be increased, but it is not recommended, because it can cause problems, especially in IE.
    
  • It is possible to define

    custom Gantt units

    to be used in GanttHeader, GanttBackground, but also in PageSize, ChartSize, GanttUnits, and so on. The custom units cannot be used in GanttExclude.
    The custom units can have even variable size, e.g. this example defines custom units 'wh' as work hours 9:00 - 13:00, 13:00 - 14:00, 14:00 - 18:00, 18:00 - 9:00, see it in top grid in zoom level "All in workhours".
    The custom units are created by global API function AddGanttUnits that should be called before any Gantt chart is created.
    If the custom units have variable length or don't start on 1/1/1970 00:00:00, they must be calculated in API events OnRoundDate and OnIncDate.
    See documentation for Custom Gantt units.
    

• Background

  is defined by

  GanttBackground

  attribute. The background is usually the same for all rows in grid.
  See documentation for Gantt Background.
  
  • 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.
  • If the Background contains too many units you will get debug message "Too many units in Gantt background" and the background is not rendered fully.
    In this case define wider Background units in the repeater, or decrease the Gantt column width by using different zoom or use Gantt paging (GanttPaging='1') and page the background by GanttPagingFixed attribute.
    The limit is 10000 units and is set by GanttBackgroundMaxUnits. This limit can be increased, but it is not recommended, because it can cause problems, especially in IE.
    
  • The GanttBackground is usually defined for whole column, but it can be set also for individual rows to have different background in one or more rows.
    Setting GanttBackground for individual rows can remarkably slow the grid rendering if the background generates many units. Or even break down the grid especially in IE, because the max limit 10000 is not summed for the rows.
    

• 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.
  See documentation for Gantt Mark.
  
  • 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.
    
  • The mark can display also image in the range. It is designed especially to display various curves in Gantt chart. The image is resized / shrunk to fill the whole date range of the mark. To display normal image in Gantt chart use GanttFlags instead.
    The image is defined by the suffix #classindex as text (not a number). The image gets automatically extension ".png". There are four predefined lines GanttLineA <, GanttLineB >, GanttLineC /, GanttLineD \.
    Default location for the images is the style directory (e.g. Grid/Modern/). The path can be changed by GanttMarkPath attribute. This example sets it to the actual Tutorials/Gantt/ directory.