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

4. Run drag

Resizing, moving, creating, deleting and copying Run boxes

Source: 04-Run_drag2.xml - Test dragging boxes between grids
  • There are many options for resize, move and copy the run boxes. These options can be set for the whole Gantt column or for individual rows.
  • Individual boxes have set their moving and resizing permissions by their type in the GanttRun definition: Box (normal), Fixed (not movable, not resizable), Left (not movable, resizable only right side), Right (not movable, resizable only left side), Solid (not resizable), for more information see previous tutorial.
  • All these dragging attributes (GanttRunResize, GanttRunMove, GanttRunAdjust, GanttRunNew, GanttRunNewStart) can have different values when dragging with shift key (Ctrl, Shift, Alt) and with other mouse button (Right, Middle).
    The value is set by attribute with appropriate suffix, it can be combined mouse button and shift key, the shift key suffix is before the mouse button.
    For example GanttRunResizeCtrl, GanttRunMoveRight, GanttRunAdjustShiftMiddle.
  • GanttRunResize

    attribute controls how the boxes are resized.
    Now there is only one way of resizing boxes, by dragging its edge, so this attribute sets only resizing permissions - empty value means no resizing, "Resize" for resizing resizable boxes, "All" for resizing all boxes. Default value is "Resize".
    The box can be deleted by resizing to zero width when set


    ='1' (default setting).
  • GanttRunMove

    attribute controls how the boxes are moved or copied inside or outside the row. It controls the source row for dragging.
    To restrict moving at all, set GanttRunMove to empty string.
    • Default is "Slide" to shift the box left or right only inside its row. It cannot change the box order, except GanttRunAdjust contains "Error".
    • "Move" moves the box inside or outside the row. The original place of the box is filled by empty space.
    • "Remove" moves the box inside or outside the row. The original place of the box is deleted and the other boxes in row are shifted according to GanttRunAdjust setting.
    • "Copy" copies the box to the new position inside or outside the row. The original box remains unchanged.
      Calls API event OnGanttRunBoxNew, here you can change especially box Id, because it is duplicate of the original box.
    • There are also other flags controlling which boxes will be moved.
      "All" - also fixed boxes can be moved.
      "Single" - by default are the joined boxes moved together, if used "Single", it moves only the one actual box.
      "Entire" - all boxes in the row, including spaces.
      "Group" - all boxes in the same group in the row; if set also "Entire", preserves spaces between boxes.
      "Selected" - all selected boxes in the row; if set also "Entire", preserves spaces between boxes. The selecting boxes is permitted by GanttRunSelect attribute.
      "Clear" - clears selected boxes after drop.
  • GanttRunAdjust

    attribute controls how the other boxes will behave, when some box is shifted inside, dropped to or removed from the row. It controls also how the dropped box will be updated. It controls the destination row for dragging.
    The GanttRunAdjust can have different values for GanttRunMove / GanttRunResize actions. These options are set by the attribute with appropriate postfix: GanttRunAdjustResize, GanttRunAdjustSlide, GanttRunAdjustMove, GanttRunAdjustRemove, GanttRunAdjustCopy.
    Remember, the order of the keywords is important. For example "Move,Resize" means that the box is first tried to move and next, only if it still cannot be placed, tries to resize it. And the "Resize,Move" will behave differently.
    • Empty value - When set nothing, the box will be moved within surrounding empty space only.
    • Default is "Shift" - The box will be moved or resized within surrounding empty space and if required, the next or previous boxes will be shifted and their empty spaces preserved.
    • "Shrink" - The box will be moved or resized within surrounding empty space and if required, the next or previous boxes will be shifted and their empty spaces shrunk.
    • "Slip" - The next or previous boxes will be shifted, all empty spaces will be preserved, including the adjacent.
    • There are also other flags controlling which boxes can be moved.
      "All" - also fixed boxes can be moved.
      "Single" - when there are more adjacent boxes without space, the surrounding space will be taken as none, especially for Shift and Slip. If not present, the surrounding space is taken as the nearest space.
      "Append" - when dragged to box edge, attaches it to the box without space as adjacent - the boxes will be joined.
      "Inside" - restrict moving boxes outside the existing boxes (before the first and after the last box).
      "Between" - when dragged to box, it places the source box left or right (nearer edge) next to the destination box.
      "Nbsp" - The Nbsp boxes can be automatically resized like Empty boxes, but they are not automatically deleted.
    • Flags controlling how the source box will be changed if there is no room for it.
      "Error" - the box will be moved or resized even if there is no room for it, in this case it will be marked as error. The attribute


      controls behavior of error boxes.
      • If set GanttRunError='Sort' (default value), the boxes will be sorted according to their start date. The boxes are sorted also on start.
      • If set GanttRunError='Merge', the boxes will be merged together. Only Box and Solid boxes are merged.
      "Resize" - the box will be resized if there is no room for it.
      "Move" - the box will be moved left if there is no room for it (also shifting boxes on left side by Shift/Shrink/Slip will be permitted).
      "Zoom" - when moving between grids, the box will have the same width on screen and its physical width will be changed by difference between zoom in the grids.
  • GanttRunNew

    attribute defines the new box that will be created when dragging on empty space. It has the same format as the GanttRun definition except Start / End items.
    It can define also more boxes to create more boxes at once, only the first box will be resized when dragging the new box while creating.
  • GanttRunNewStart

    attribute defines the new box(es) when creating new box in empty cell. It is possible to add here also Start / End boxes to be created too.
    It can also specify the definition format Array or JSON for save.