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

2. Run JSON definition

Two ways of defining Run in JSON format

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


Source: 02-Run_JSON_continuous.xml - Run defined by global Start for the whole Run and adjacent boxes with only Duration
  • See documentation for Gantt Run.
  • This example shows the same grids and description as the 01-Run_array_definition, just uses Gantt Run JSON format instead of Array format.
  • 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.
  • JSON definition


    It is defined by

    GanttRun

    attribute containing JSON array of box objects like "[{...},{...},{...}]".
    The JSON definition must start with "[" as the first character, without any white space before. In other places are white spaces permitted.
    Attribute names are sensitive, but in input data are possible two variants first letter upper case (e.g. Start) and all letters lowercase (e.g. start). In output is used always first letter upper case (e.g. Start).
    All the parameters are optional, e.g. {} is empty separating box, {Duration:xxx} is standard box.
    To use JSON definition for new boxes in empty run, define the GanttRunNewStart in the JSON format, e.g. GanttRunNewStart="[{Duration:'0.0001'}]".
    The JSON definition is slower to parse and save than the Array definition.
    • Independent boxes

      are defined by only

      GanttRun

      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

      GanttRunStart

      and all bars adjacent defined in

      GanttRun

      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 ({}) like "[{Duration:2},{},{Duration:1}]".
      • 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.
  • Array definition


    It is defined by the same attributes like the JSON definition, the GanttRun uses just Array format instead of array.
    Demonstrated in previous example 01-Run_array_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

    type

    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

    content

    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

    tooltip

    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

    style

    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

    and

    height

    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

    milestone

    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.