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


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


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


1. Calendars exclude


1. Resources 2. Availability

2. Dependencies between tasks

Links between tasks - Ancestors and Descendants

  • See documentation for Defining dependencies.
  • Defining dependencies

    • Dependencies are defined in column set by


      and / or


      If defined both columns, the dependency can be entered in any one and is mirrored to the other column.
      The GanttAncestors (in some other programs called predecessors) are the previous tasks and the GanttDescendants (successors) are the next tasks.
    • The GanttDescendants and GanttAncestors are defined per Gantt cell and one value contains all dependencies of all tasks in the Gantt cell.
      The individual dependencies are separated by RangeSeparator (<Lang><Format RangeSeparator=';'/></Lang>), by defaults by semicolon ';'.
      Every task can have more dependencies.
    • The one

      dependency definition

      has this format " from,to@idtype+/-lag!float#color ", for example 3ss+3!1. Only the id is mandatory.
      • The from and to identify main bar plan or run box id. They can be omitted if the bar is default GanttTask, except for Run box.
      • The id is row id the dependency points to (for GanttDescendants) or the row id the dependency coming from (for GanttAncestors).
        The id is the only required part of the depedency definition.
      • The type can be fs (finish->start),ff (finish->finish),ss (start->start) and sf (start->finish). The default is fs that is used if the type is omited.
        The type controls which edge of the tasks will be referenced (ancestor->descendant).
      • The lag is reserved time between dependency start and its end, the lag is used to check if the dependency is correct or not and when correcting dependencies.
        The lag can be positive or negative, it must be always written with the sign + or -. The lag value is in GanttDataUnits.
        The lag can be also in percentage of duration (in workdays) of the source (ancestor) task (with % suffix).
      • The float value is maximal permitted time between dependency start+lag and its end, the float is used to check if the dependency is correct or not and when correcting dependencies.
        The float value is in GanttDataUnits.
        The float can be also in percentage of duration (in workdays) of the source (ancestor) task (with % suffix).
        Missing float value is set according to GanttIncorrectDependencies setting, for '1' is unlimited and for '2' is 0.
      • The color specifies color and style of the depencency line and arrow.
        There are predefined 10 colors in 4 shape sets, together 40 different lines and arrows.
    • Dependencies can be connected only to Gantt tasks, defined by


      It is Main by default for the first main bar plan and can be also Main1, Main2, Main3, ... for different main bar plans, All for all main bar plans, Run for the whole run and Box for individual run boxes.
    • The dependencies are attached always to the whole main bar (to the first and to the last part). But different main bar plans can have different dependencies in the same row.
      The dependencies can be attached to the whole run bar (if GanttTask contains "Run", see tutorial 06-Run_bar_as_task) or to every run box separately (if GanttTask contains "Box", see tutorial 07-Run_box_as_task).
  • Creating and editing dependencies

    • Dependencies are fully editable by default. It is possible to restrict editing dependencies by removing dependency flag from


      To not edit dependency type remove dependencytypes flag from GanttEdit. All new dependencies will get FS type in this case.
      To not edit dependency lag remove dependencylags flag from GanttEdit.
    • By default the dependencies can be created only between the same GanttTask type (the same Main bar plan and between run bars).
      By GanttDragDependenciesBetween is possible to permit dependencies between different main bar plans or between run bar and main bar.
    • By default there can be only one dependency between two bars.
      By GanttDragDependenciesMore is possible to permit more dependencies between two bars, with different or even the same type.
    • It is possible to permit or restrict circular dependencies by GanttCheckDependencies attribute.
  • Dependency colors and shapes

    • By default the correct (normal) dependencies are shown blue, the incorrect dependencies in red and disabled dependencies in gray.
    • If dependency has not assigned color or when one bar edge has more connected dependencies, the dependency color can be assigned automatically according to GanttAssignDependencies and GanttDependencyColor values.
    • The

      incorrect dependency

      has its end before its start. It is possible also to mark as incorrect dependency the one that has not exactly its start equal to its end. Or mark all dependencies always correct.
      It is controlled by GanttIncorrectDependencies attribute or by float part in individual dependency definition.
      The color for incorrect dependency is set by GanttMarkIncorrectDependencies and GanttColorIncorrectDependencies attributes.
      The incorrect dependencies can be automatically corrected by moving tasks, see tutorial 03-Scheduling_tasks.
    • The

      disabled dependency

      is connected to disabled task.
      The color for disabled dependency is set by GanttMarkDisabledDependencies and GanttColorDisabledDependencies attributes.
    • It is possible to hide arrow or stub dependency icons by GanttDependencyArrows attribute.
  • The dependencies can be controlled by API methods GetDependencies, AddDependencies and DeleteDependencies and event OnGetDependency.
  • The two vertical red lines are automatically calculated base and finish dates for the whole chart. See tutorial 01-Constraints - Project constraints.