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

7. Run box as task

Every Run box as independent Gantt task

This example demonstrates also many ways of dragging Run bars: Dragging bar by left mouse button moves the single bar freely.
By shift + left button moves the bar to another row. Moves all selected boxes, if the dragged box is selected. By right button selects range of boxes.
  • 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 box as task set "


    " flag to


    In this case every run box will be one Gantt task. So there can be many Gantt tasks in one cell.
    To have all Run boxes together as one Gantt task set "run" to GanttTask, see the tutorial 6. Run bar as task.
  • The Run box

    percentage completion

    is set individually for every box by GanttRun part 11


    attribute in range 0 - 100. 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 box can be




    . The box state is set individually for every box by GanttRun part 7


    , values disabled or locked.
    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 all boxes in row, remove the run... flags from GanttEdit and also set CanEdit='0' to all the source cells.
  • Dependencies

    are attached individually for every box. Normally by


    or by


    The box must have set or generated its


    attribute (part 5 of the GanttRun) to attach dependencies to it.

    Every the box is identified by its Id and optionally by Group value as Id or Group$Id, e.g GanttDescendants="B1,B2@R1" or "B1,B3@R2#11;G1$B1,G2$B1@R3"
    See documentation for Defining dependencies.
  • Manual start

    for correcting dependencies is set individually for every box by GanttRun part 10


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

    are attached individually for every box by GanttRun part 12


    See documentation for Resources assign.
  • The Run box as Gantt task supports standard settings for individual boxes like text, tooltip, class, color and so on.