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

1. Run array definition

Two ways of defining Run in Array format

Source: 01-Run_array_independent.xml - Run defined by Start + End or Duration for every box. Used FastGantt and GanttLastUnit attributes.

Source: 01-Run_array_continuous.xml - Run defined by global Start for the whole Run and adjacent boxes with only Duration
  • See documentation for Gantt Run.
  • The Run is universal Gantt object to show one or more resizable and movable bars and / or movable milestones in one cell.
    The Run can be used as one Gantt task, as Gantt task per box or for any bar chart, not only Gantt.
    The advantages of the runs are especially various bar types (normal, solid, fixed, ...), different texts and classes for individual bars inside one cell, different vertical positions and heights of the bars, many options for moving and resizing the run bars, search for the bars inside whole chart and large JavaScript API.
    To speed up the Run rendering, you can set Cfg attribute FastGantt='1', the look is slightly worse, but every Run box is done by one HTML tag. Demonstrated in the first grid.
  • Array definition

    It is defined by


    attribute containing two dimensional array separated by two separators.
    By default the semicolon ; separates boxes and comma , separates box attributes. No box attribute value can contain these separators.
    Other separators can be used by adding them before the run definition, see the row 21 and 25.
    • Independent boxes

      are defined by only


      attribute, every Run box is specified by its Start date and End date or by Start date and Duration in GanttDataUnits.
      Demonstrated in the first grid.
      You define only boxes, the spaces between boxes are added automatically. Internally the Run is always defined as continuous, so between all not joined boxes is always one Empty type box (even with zero or negative duration).
      • To define joined boxes (directly or by Nbsp), you must also define the second and next boxes only by Duration (like in the continuous definition), without Start date to not add spaces between them.
      • It is possible to define the boxes in random order, but there must be set GanttRunError='Sort'.
        Remember, the GanttRunError='sort' on start slows down the initialization, because all the boxes must be sorted on start.
      • By default are the Run saved back with Start+End (if not defined GanttRunStart attribute). To save Run by Start+Duration set GanttRunSave='2'.
      • If set GanttLastUnit (usually to 'd' as days), the End date in definition is the last unit (e.g. day), not the exact date. Simply, the End date definition is by the one unit less than the exact end date.
    • Continuous Run

      is defined by start date for the whole Run in


      and all bars adjacent defined in


      by only the bar Duration.
      Demonstrated in the second grid.
      You must define all bars including spaces between them.
      • If two Run bars don't have Empty box between them, they are joined.
        To define two not joined bars, you must include Empty box between them, even if they are adjacent.
        To shorten the definition, the Empty box between adjacent bars can be added by completely empty definition (two semicolons) like "2,box;;2,box".
      • Empty type box can have also negative duration to move the next box over the previous one.
      • The continuous run definition is shorter and faster to parse than the independent boxes, especially for many boxes per cell.
  • JSON definition

    It is defined by the same attributes like the Array definition, the GanttRun uses just JSON format instead of array.
    Demonstrated in next example 02-Run_JSON_definition
  • Summary definiton

    It is also possible to define the individual Run boxes by child main bars (one per one). In this type of definition the GanttRun attribute is used just internally.
    The child tasks can be visible to let manipulate with the bars or hidden to be used just for definition. The changes in Run are done also to source main bars and can be also uploaded to server.
    Demonstrated in next example 03-Run_summary_definition
  • Run box


    is set by GanttRun box 2nd attribute Type. Demonstrated in many rows, e.g. in 12, 13, 14, 15 .
    The Type can be Box (standard box), Solid (not resizable), Fixed (not movable and resizable), Left (fixed left), Right (fixed right), Empty (empty space between boxes, inactive), Nbsp (empty space between joined boxes), Bound (not movable start or end), End (automatic movable start or end).
    It can define also milestones by Milestone (movable milestone) and Stop (not movable milestone).
  • Run box


    is set by GanttRun box 3rd attribute Text. Demonstrated in many rows, especially in row 25.
    It can contain any HTML code. The box height is updated according to its HTML content, except FastGantt is set.
    Remember the characters < & " ' must be replaced by XML entities (&lt; &amp; &quot; &#x27;) when placed to XML (but not in JavaScript API).
    Also remember it cannot contain the GanttRun separators. The default separators are ',' and ';' if you want to use them in HTML code, define different GanttRun separators on its start.
    The box content can be calculated also by GanttRunHtml attribute, it can automatically compose the content from the box start/end date, duration, text and many other box settings.
    The box content can be also created dynamically by OnGetGanttRunText API event. Demonstrated in row 27.
  • Run box

    side text

    is set by GanttRun box 14th and 15th attributes TextLeft and TextRight. It can contain any HTML code. Demonstrated in rows 5, 6.
    The texts horizontal position is controlled by GanttRunHtmlLeftEdge and GanttRunHtmlRightEdge, the available positions are before, inside left, centered, inside right and after.
    Vertical position is set by GanttRunHtmlShift. It is also possible to generate the side texts by API event OnGetGanttRunSideText to achieve any count and positions of the main bar side content.
  • Run box


    is set by GanttRun box 5th attribute Tip. It can contain any HTML code. Demonstrated in row 1.
    The box tooltip can be calculated also by GanttRunTip attribute, it can automatically compose the content from the box start/end date, duration, text and many other box settings.
    The box tooltip can be also created dynamically by OnGanttTip API event.
  • Run box


    is set by GanttRun box 4th attribute Class. It is a part of custom CSS class. Demonstrated in rows 18, 19, 20.
    The box CSS class can be also created dynamically by OnGetGanttRunClass API event. For side texts use GanttRunHtmlLeftClass and GanttRunHtmlRightClass.
  • Run box

    vertical position



    is set by GanttRun 9th and 10th attributes Top and Height. The Height is inner box height in pixels. Demonstrated in row 25.
    The values can be set also for boxes in the run by attributes GanttRunTop and GanttRunHeight.
    Row height is automatically updated to show all the boxes if set GanttBottom attribute (by default is set).
    New boxes can be created or moved to different vertical levels if set GanttRunLevels. Demonstrated in row 26.
  • Overlaid (error) boxes

    can be handled in more ways. Demonstrated in rows 17, 23, 24, 25, 26.
    • To mark the overlaid boxes as error in red set GanttRunErrors='1'. It is default behavior. Marked is always only the next (right) box from the two overlaid boxes.
    • To place the overlaid boxes vertically below themselved to show all the boxes set GanttRunErrorsShift to pixel value how the second box will be shifted vertically. Usual value is 17 for standard height boxes to move it by the whole height.
    • To permit Run boxes overlay when moving or resizing them, add keyword "Errors" to GanttRunAdjust attribute(s).
    • When set keyword "Sort" into GanttRunError (default setting), the boxes are sorted in GanttRun by their start date after any change. You can add also keyword "Merge" to the GanttRunError to merge the overlaid boxes after any change.
  • Run


    is defined by GanttRun box 2nd attribute Type, values Milestone as movable milestone and Stop as not movable milestone.
    The milestone has always zero duration. It is also possible to have resizable zero duration box. Use GanttRunMilestones attribute to control creating the milestones / zero duration boxes.