News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Live examples
Grids and tree grids

Complex grid - the first one Complex grid - RTL mode Large table with paging Large table without paging Multiline & images - books Positions and spanning Photo album - images PivotTable - 2D grouping Schools - list and ratings File and directory browser Extended JavaScript API Sharing & synchronization 1 000 000 rows, 1 000 cols

Sheets

Microsoft Excel sheet TreeGrid sheet TreeGrid sheet - RTL mode

Gantt and bar charts

Gantt & Network chart Gantt & Network chart - RTL Simple Gantt chart Big Gantt chart - 1000 rows Gantt chart tree by grouping Resources usage chart Run chart - bar chart Grouping bars - run groups Joined boxes and containers Line chart and XY charts

Live grid tutorials
Basic (rows and columns)

1. Basic grid 2. Rows 3. Columns 4. Default rows, columns 5. Rows manipulation 6. Rows identification

Cells (types, formats, edit)

1. Edits - inputs & multiline 2. Combos & checkboxes 3. Html, links, imgs, buttons 4. Space buttons & tabs 5. Permissions & validation 6. Cell CSS style & color 7. Conditional formatting 8. Custom controls & editing 9. Events & custom dialogs 10. Column & row spanning 11. Dynamic cell spanning

Tree (rows, columns, groups)

1. Row tree 2. Column tree 3. Grouping rows to tree

Sorting rows

1. Sorting rows

Filter and search

1. Filtering rows 2. Filtering in tree 3. Search & advanced filters

Dragging

1. Dragging rows 2. Dragging between grids 3. Dragging external tag

Paging (rows, tree, columns)

1. Client root paging 2. Client child paging 3. Client column paging 4. All client paging 5. Adding pages dynamically 6. Server root paging 7. Server child paging 8. All server paging

Master and detail

1. Nested detail simple 2. Nested detail tables 3. Master detail simple 4. Master detail tables 5. Master detail more tables 6. Master detail in tree 7. Master detail trees 8. Nested detail nested deep 9. Nested detail server paging

Calculations (cell formulas)

1. Calculated columns 2. Calculated rows 3. Calculation order 4. Calculated rows in tree 5. Calculation order in tree 6. Calculated attributes 7. Editable calculated cells

Live Sheet tutorials
Sheet features

1. Row and column Index 2. Auto size (auto adding pages) 3. Row&column manipulation 4. Cell manipulation 5. Cell style 6. Editable formulas (ids) 7. Editable formulas (indexes) 8. Cell format 9. Outside edit 10. Auto tree

Live Gantt tutorials
Main bar (Gantt chart)

1. Main bar 2. Discrete main bar 3. Main bar plans 4. Summary tasks

Run bar (Bar chart)

1. Run array definition 2. Run JSON definition 3. Run summary definition 4. Run drag 5. Run groups & API 6. Run bar as task 7. Run box as task 8. Network diagram 9. Run join and drag 10. Run external drag 11. 2 fixed levels containers

Flags and points

1. Flags 2. Points

Display, zoom, paging

1. Header & background 2. Zoom 3. Paging 4. Synchronizing more Gantts

Dependencies & scheduling

1. Constraints 2. Dependencies 3. Schedule tasks 4. Critical path

Calendars

1. Calendars exclude

Resources

1. Resources 2. Availability

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 can also display static text defined by GanttMarkTexts 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. Styles/). The path can be changed by GanttMarkPath attribute. This example sets it to the actual Tutorials/Gantt/ directory.