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

6. Run bar as task

Complex and extended Gantt task from individual parts

This example demonstrates also many ways of dragging Run bars: Dragging bar by left mouse button moves the single bar and if required, moves the others.
By right button moves the whole task. By ctrl + left button moves the bar freely and joins it with other bars if overlapped.
By ctrl + right button moves the bar and if required shrinks the others (removes spaces between them).
By shift + left button moves the bar to another row. By shift + right button moves the entire task (all boxes, including fixed) to another row.
  • There are five tutorials for Gantt task types and features:
  • There are five tutorials for Gantt Run to show the run definition and all its features:
  • See documentation for Run bar
  • To use Run bar as task set "


    " flag to


    In this case all the boxes together will compose one Gantt task. So there can be only one Run bar as task per Gantt cell.
    To have every Run box as Gantt task set "box" to GanttTask, see the tutorial 7. Run box as task.
  • The Run bar as task works similarly to discrete main bar (GanttParts), but it provides more settings to individual boxes and also extended moving and resizing possibilities, including moving the boxes between rows or grids.
  • The Run is defined by


    attribute. This attribute lists all the Run boxes and their individual settings.
    There are two formats of the GanttRun, Array definition and JSON definition. See the GanttRun documentation for more information.
    This example uses Array definition, the next example for Run boxes uses the JSON definition.
  • The Run bar supports also Start, End and Duration cells to show and change the whole task dates.
    They are set by






    In data these cells are expected to be empty, the data are read (calculated) from and saved to GanttRun and optionally GanttRunStart.
  • The Run bar

    percentage completion

    is set by


    attribute in range 0 - 100. The completion is computed for whole task.
    If used calendar / excluded dates, the percentage completion can be shown preciselly for the excluded dates if set GanttExcludeComplete.
    To round the percentage completion to some units (GanttUnits or GanttDataUnits) when is set by click to bar use GanttRoundComplete. It restricts also incomplete bars for very small completion.
  • The Run bar can be




    . The state is set by


    attribute or column.
    Disabled task cannot be changed and is also ignore in all calculations. Locked tasks cannot be changed.
    It is possible to permit changing the disabled/locked tasks manually by a user by GanttEditDisabled='1'.
    To have not editable task, remove the run... flags from GanttEdit and also set CanEdit='0' to all the source cells.
  • Dependencies

    are attached for the whole Run. Normally by


    or by


    To the first box are attached start dependencies, to the last box are attached finish dependencies.
    If the GanttTask contains only the "run", the Run need not be identified for dependency and the row id is enough, e.g. GanttDescendants = "R1" or "R2#11;R3"
    If the are more flags in GanttTask, the run is identified by '-' (minus), e.g. GanttDescendants="-@R1" or "-,-@R2#11;-,1@R3"
    See documentation for Defining dependencies.
  • Manual start

    for correcting dependencies is set for the whole Run by


    It is permitted / controlled by attributes GanttRunManualChange and GanttManualSide.
  • Resources

    are attached for the whole Run by GanttRunResources.
    See documentation for Resources assign.
  • The Run bar as Gantt task still supports different settings for

    individual boxes

    like text, tooltip, class, color and so on.
    It does not support only these attributes for individual boxes: Disabled and Locked state,Complete, Resources and Manual. All these setting can be set only by cell attributes for the whole run.