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

5. Run groups and API

Manipulating Run box groups by actions and API

  • It is possible in GanttRun to assign to some or all boxes their identification - Group and Id.
    • The


      should be unique identification at least inside one group.
    • The


      identifies more boxes and is possible to manipulate all the boxes in the same group together.
  • The box ids can be automatically created for new or all unassigned boxes by setting


    It is also possible to choose the characters to generate the ids from by GanttRunIdChars and id prefix and suffix by GanttRunIdPrefix and GanttRunIdPostfix.
    Note that GanttRunIdPrefix has default value "new".
  • If the boxes have set their Id attribute and is set also


    ='1', the grid fills for every changed box its state: Added, Deleted, Moved, Resized, Changed to identify the changed boxes in uploaded data.
    Also for every box change is called API event OnGanttRunBoxChanged.
  • GanttRunGroupHover

    attribute controls which boxes in the same group as the box under mouse cursor will be highlighted on mouse hover.
    0 - none, 1 - only in the same row, 2 - all boxes in grid (can be slow for large grids).
  • It is possible to select one or more run boxes. Which boxes can be selected can be set by


  • Actions

    for boxes and groups (except dragging, see previous tutorial 04-Run_drag)
    • There are actions to


      the box under mouse cursor (DeleteGanttRun), to delete all boxes in the group in the same row (DeleteGanttRunGroup) and to delete all boxes in group (DeleteGanttRunGroupAll), to delete selected boxes (DeleteGanttRunSelected) .
      These actions can be attached to TreeGrid events and are accessible also from Gantt right click popup menu.
    • There are actions to


      box type - to choose the type, class and other properties from list predefined in


      The actions are for one box (ChooseGanttRunType), for all boxes in group in the same row (ChooseGanttRunGroupType) and for all boxes in group (ChooseGanttRunGroupAllType), for all selected box by (ChooseGanttRunSelectedType).
      These actions can be attached to TreeGrid events and are accessible also from Gantt right click popup menu.
    • The other actions are only for the one active box, not for groups: EditGanttRun to enter the box text and EditGanttRunTip to enter the box tip.
    • There are actions to


      boxes: SelectGanttRun inverts selection of one box, by default on double click.
      SelectGanttRunRect selects all boxes in the rectangle created by dragging, by default by dragging by right mouse button.
      DeselectGanttRunAll deselects all boxes.
  • API

    for boxes
    • GetGanttRunBox to get one box from run by its index or Id and Group. Returns fully filled run box object.
    • SetGanttRunBox to modify one box in run.
    • AddGanttRunBox to create new box and insert it to run to given position.
    • DelGanttRunBox to delete given box from run.
    • ScrollToGanttRunBox to show the box in chart.
    • GetGanttRunBoxTag to get DOM object of the box to modify its look, but not position or size.
    • FindGanttRunBoxes

      as complex searching function to get one or more boxes according to given parameters.
      It can search in one or more box attribute, by default in Id, Group, Type, Text, Class, Tip. It can search exact string or just part of it. Can search case insensitive and has many other options.
    • SelectGanttRunBox to select given box.
    • SelectGanttRunRect to select all boxes in given rectangle.
    • GetGanttRunSelectedBoxes to get all selected boxes in grid.