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

11. Two fixed levels containers

Run containers fixed in two levels

  • Example UI

    There are two container levels, the first level Pairing, the second level Duty.
    The container can be added from popup menu on right click to the box. The container can be removed or boxes in the container can be deleted from popup menu on right click to the container.
    Dragging box or container will remove it from its container and place it to new container.
    Dragging with shift horizontally preserves the box or container position in parent containers. Dragging with shift vertically to another row preserves its horizontal position.
    The dragged box or container will be dropped to the hovered container (with red border) or to the container of the hovered box.
    Dragging with ctrl will copy the box, selected boxes or container.
    Dragging with right mouse button will select area of boxes. Dragging with right mouse button in header will select area of boxes in selected or focused rows.
    Dragging with shift and right mouse button will move the box or container out of its parent container.
    Dragging with ctrl and right mouse button will copy the box or container without its parent container.
    Dragging container edge in the 4th row will resize the container.
    Ctrl + click deletes the box or container. Double click selects or unselects the run box or container. All boxes can be selected or unselected in right click popup menu.
    All actions can be fully customized - assigned to different events.
    The box text shows: box identification (one letter), colon, Pairing container with index, dot, Duty container with index. Box not in any container shows question mark. Generated by API OnGetGanttRunText.
  • Container definition

    The containers have no specific definition, they are defined per run box, in 15th attribute Container of GanttRun.
    The Container attribute can contain more containers, dot separated. To have fixed container levels, let the unused container position empty, e.g. Containers:".X...Y".
    The container name consist from two parts, type and id, separated by @, e.g "X@1". For fixed levels containers the type is usually one different per level and id differs the containers on the same level.
    The container name must be unique within one cell. All boxes with the same container name are placed to the same container.
    The container size is always exactly to accommodate all its boxes.
  • Dragging containers

    Containers can be dragged like single boxes. When the container is dragged, it moves all its boxes (and inner containers).
    How the boxes and containers are dropped to destination container or empty place is controlled by GanttRunAdjust attribute.
    Add flag "Containers" to the GanttRunAdjust to control the containers when the box is dropped. If the flag "Containers" is not set, the boxes and containers are dropped unchanged, with their actual Containers value.
    For fixed level containers add also "ContainersLevels" and "ContainersUnique" to GanttRunAdjust to preserve the nesting levels and make the container unique when dropping.
    Possibly add also "ContainersMerge" to GanttRunAdjust to merge containers on the same or higher levels to make the dropping more easy.
    Possibly add also "ContainersDelete" to GanttRunAdjust to delete original containers when dropped to lower container levels or empty place. It is not set in this sample.
    The containers can be copied by dragging similarly to copying boxes by adding "Copy" to GanttRunMove instead of "Move" or "Slide".
  • Adding, deleting and disabling containers

    The containers can be controlled in three ways: from right click popup menu, by single actions or by API.
    For fixed level containers define containers GanttRunContainers (for adding and changing container) with assigned levels to the container names (by dot), to be added or changed only on assigned level.
    • In popup menu on box there are items to control the container: AddGanttRunContainer (adds new container to the box).
      In popup menu on container there are items to control the container: DelGanttRunContainerOnly (delete the container only, remove it from its boxes Containers attribute), ChooseGanttRunContainer (change container type).
      In popup menu on container there are items to control boxes in the container: DelGanttRunContainer (delete all boxes in the container and the container itself), ChooseGanttRunContainerType (change all boxes in container), DisableGanttRunContainer (disable all boxes in container), LockGanttRunContainer (lock all boxes), EnableGanttRunContainer (enable all boxes).
    • Actions for container: DeleteGanttRunContainerOnly (delete the container only, remove it from its boxes Containers attribute), DeleteGanttRunContainer (delete all boxes and the container itself), ChooseGanttRunContainer (change container type).
      Actions for box: AddGanttRunContainer (adds new container to the box).
    • API for adding, changing, deleting and disabling containers is described in documentation. It contains also API to get all actual containers.
  • Resizing containers and empty space around

    The containers can define their edges different from their edge boxes by hidden box of Type Edge. The Edge type box can be only on container edge and must not be joined to another box.
    If the container has Edge type box on its edge or if set GanttRunContainersResize='2' it can be resized by mouse dragging. Its size can be freely increased and it can be decreased to the first box on the edge.
    If the container has Edge type boxes on its edges, it can be also empty without any other boxes, except if set GanttRunContainersDelete='3'.