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. Date constraints

Task and project date constraints

  • Chart constraints

    are defined for the whole chart and cannot be changed by a user.
    By default the chart is exactly wide to display all objects (Main bar, Run bar, Flags and Points) in all rows and also the GanttBase and GanttFinish. The task Constraints objects affect the chart width only if set GanttShowConstraints='2'.
    The chart is resized whenever the most left or the most right object moves inside or some object moves outside the chart. To disable this behavior set GanttSize to anything except empty string.
    The limits have this priority order: MaxWidth, GanttSize, GanttChartMinStart/MaxEnd, GanttChartMaxStart/MinEnd, GanttChartRound, MinWidth, chart size according to its content (tasks and objects plus GanttLeft/Right).
    See documentation for Chart size limits.
    • The

      GanttSize

      limits the Gantt chart width to show specified time unit, e.g. two months (as M2) or one day (as 'd'). Can be extended by GanttSizeLeft and GanttSizeRight.
      It is used especially in Gantt paging to show the page. See tutorial 03-Paging.
    • The

      MaxWidth

      and

      MinWidth

      specify maximal and minimal width of the column, in pixels.
      The maximal MaxWidth is limited in IE to 178,957. In Gantt paging it can be 1,193,049 for IE8 strict mode, 1,342,177 for IE8 quirks mode and 1,533,918 for other IE versions. Other browsers are not limited.
    • The

      GanttChartMinStart

      and

      GanttChartMaxEnd

      define bounds for the whole chart, the chart will never show outside dates (except applying column GanttSize attribute).
      No Gantt object can be moved or created outside these bounds. These two constraints are the only chart constraints affecting data, all other affect only display width.
    • The

      GanttChartMaxStart

      and

      GanttChartMinEnd

      define minimal date range for the whole chart, the chart will always show the dates inside the range (except applying column MaxWidth attribute).
      These bounds has no effect for the Gantt objects.
      If MaxStart == MinStart and MinEnd == MaxEnd the chart size is fixed and it always shows the same dates (except applying MaxWidth/MinWidth and GanttSize).
    • The GanttChartRound rounds the first and last date shown in the chart to given units (like "y" for year, "d" for days). The rounding never shrinks the chart width.
      The GanttLeft and GanttRight adds given count of empty GanttUnits on the chart sides.
  • Project constraints

    are defined for the whole chart and can be optionally changed by a user.
    The project constraints can be hidden, but still used when set GanttShowBounds='0'.
    See documentation for Project date constraints.
    • GanttBase

      defines the project start date.
      On the project start should start all tasks without incoming dependencies, if set GanttStrict='1' and the dependencies are corrected, auto or manually.
      If the project start is not set or it is deleted, the (thin) line is displayed on start date of the most left task in the chart, but does not affect anything.
      No gantt object can be moved or create before project start date if set GanttBaseProof='1'.
      The project start can be changed by mouse dragging if set GanttBaseCanEdit='1'.
      The project start can be read and changed also by API by methods GetGanttBase and SetGanttBase, usually for let users to edit it in some cell.
      The project start is uploaded to server in <Gantt> XML tag when set Upload_Type='Gantt'.
    • GanttFinish

      defines the project finish date.
      The project finish is mostly used to calculate critical path, by calculating GanttSlack value for every task. The critical tasks have zero (or small) value of the slack.
      If the project finish is not set or it is deleted, the project finish is set to end date of the most right task in the chart, it is displayed as thin line and is still used for critical path calculation.
      No gantt object can be moved or create after project finish if set GanttFinishProof='1'.
      The project finish can be changed by mouse dragging if set GanttFinishCanEdit='1'.
      The project finish can be read and changed also by API by methods GetGanttFinish and SetGanttFinish, usually for let users to edit it in some cell.
      The project finish is uploaded to server in <Gantt> XML tag when set Upload_Type='Gantt'.
      If set GanttLastUnit, the GanttFinish is used and shown one GanttLastUnit higher (as the ending date of the period).
  • Task constraints

    are defined for every row. For main bar and run bar it means for every task, but for run box (GanttTask contains "box") it is defined for all boxes the same.
    The task constraints are shown in chart as icons, or can be hidden if set GanttShowConstraints='0'.
    The constraints can affect moving tasks while correcting dependencies, creating, moving or resizing task by a user and creating, moving or resizing other Gantt object, the functions are specified by GanttUseConstraints.
    The constraints can be created, moved and deleted by a user if GanttEdit contains "Constraints" keyword.
    If set GanttLastUnit, the ending constraints are used and shown one GanttLastUnit higher (as the ending date of the period).
    See documentation for Task constraints.
    • GanttMinStart

      is early start constraint, the task cannot start before this date.
      With GanttMaxStart on the same date it creates mandatory start constraint, the task must start on this date.
      If set GanttStrict='2' it is automatically added before any moved task to simulate manually scheduled task like in MS Project.
    • GanttMaxStart

      is late start constraint, the task cannot start after this date.
      For run bar it is used only when correcting dependencies, not when moving or resizing the box manually.
    • GanttMinEnd

      is early end constraint, the task cannot finish before this date.
      For run bar it is used only when correcting dependencies, not when moving or resizing the box manually.
    • GanttMaxEnd

      is late start constraint, the task cannot finish after this date.
      With GanttMinEnd on the same date it creates mandatory end constraint, the task must finish on this date.
  • Manual constraint

    is defined individually for every task. When GanttTask contains "box", the Manual is defined for every run box.
    The Manual constraint affects only moving task when correcting dependencies.
    The Manual constraint is the last position where the task was moved or resized manually by a user.
    It is defined by

    GanttManualX

    for the main bar plan X, by

    GanttRunManual

    for run bar and by GanttRun part 10

    Manual

    for run box.
    It is always only one constraint, can be set as start or end constraint, chosen by GanttManualSide (the same for all main bar plans and run bar / box).
    When the Manual constraint is shown and used is controlled by GanttManualChange for all main bar plans and GanttRunManualChange for run bar and box.