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. Summary tasks

Read only and editable summary tasks with dependencies

Source: 04-Summary_tasks.xml   Main bar as summary of child main bars, here used the same plan

Source: 04-Summary_tasks-Run.xml   Main bar as summary of child run bars
  • See documentation for Summary tasks
  • Not editable summary tasks

    The not editable summary task shows summary size and completion of its children.
    The task is defined just by formulas in source cells. It does not support dependencies.
    All the settings of summary task (the formulas) are usually set in some default row that is assigned to the summary rows.
    The summary default can be defined also for grouping, when it has set Group='1' to use for group tasks defined while grouping.
    • Continuous

      Main bar

      summary for

      Main bar

      To calculate summary of main bars use functions ganttstart, ganttend, ganttduration, ganttpercent and optionally ganttparts. The sample summary default is:
      <D Name="SUM" Calculated="1" GANTTGanttEdit="" CanEdit="0"
      STARTFormula="ganttstart()" ENDFormula="ganttend()" DURFormula="ganttduration()"
      PARTSFormula="ganttparts()" COMPFormula="ganttpercent()" />
      where the START is GanttStart, END is GanttEnd, DUR is GanttDuration, PARTS is GanttParts, COMP is GanttComplete and GANTT is the Gantt column.
      Optionally the summary definition can have defined GanttClass attribute to show the bars in different color than standard main bars and GanttIcons="1" to show side icons for bar, just for visual effect.
    • Discrete

      Main bar

      summary for

      Main bar

      If defined GanttParts attribute to support discrete main bars, at least for the summary, you can show the summary bars discrete, only for time where some child bar is defined.
      Define it the same as continuous main bar described above and replace ganttparts() function by sumparts().
      It is possible to set GanttIcons to 5 or 6 to mark the inner edges of bars as not ended.
    • Continuous

      Main bar

      summary for

      Run bar

      Retype the Run bars in summary to Main bars and use functions ganttrunminstart, ganttrunmaxend and optionally ganttrumsumduration for calculations. The sample summary default is:
      <D Name="SUM" Calculated="1" AggChildren="1" GANTTGanttEdit="" CanEdit="0"
      GANTTGanttStart="START" GANTTGanttEnd="END" GANTTGanttDuration="DUR" GANTTGanttComplete="COMP" GANTTGanttRun=""
      STARTFormula="ganttrunminstart()" ENDFormula="ganttrunmaxend()" DURFormula="ganttrunsumduration()" COMPFormula="ganttpercent()"
      GANTTGanttEdit="" CanEdit="0" />
      where the START, END, DUR, COMP and GANTT are appropriate column names used in grid.
      It is also possible to define the GanttClass and GanttIcons attributes.
      If you nest the summaries, you should set for them AggChildren='1' to sum always the source runs and not the child main bars.
  • Editable summary tasks

    The summary tasks (defined above) can be set as editable, so they can be moved and support dependencies and constraints.
    The editable summary task is defined by


    . The value is set to the children main bar plan ('0' for the first one) or to '-' for the Run bar children.
    Don't forget to define also the appropriate formulas and other settings similarly to not editable tasks.
    The editable summary has defined the formulas and other options as described in not editable summaries and these settings:
    <D Name="SUM" GANTTGanttSummary="0" STARTCanEdit="1" GANTTGanttEdit="all"/>
    where the GANTT is Gantt column and START is GanttStart column. The START can be ignored, if the grid does not contain this column (for Run bars).
    It is possible to use both editable and not editable summaries in one grid, just define the two default rows and assign them to the given summaries.
    The summary task support these features:
    • All dependencies attached to the summary task will be assigned also to all its children (as hidden dependencies).
    • Dependencies between the summary and its children will be marked or restricted as circular.
    • The MinStart and MaxEnd date constraints assigned to summary tasks will be used also for all its children if they are more restrictive than the child task constraints, if any.
    • If the tasks is moved by mouse dragging or editing its start date, it moves also all its children. The task cannot be moved, if it would lead to violate any child�s constraints.
    • The task cannot be created, resized or deleted and its GanttComplete value cannot be changed by a user. Except the GanttSummary is set to 2.
  • Special editable parent tasks

    It is possible to define parent task not calculated, but still affecting its children.
    Set GanttSummary like for editable summary task and


    ='1' and DON'T set the summary calculations by functions like ganttstart.
    The task will be resizable and its size will NOT be calculated according to its children.
    But after its move, it will move also its children and also all its dependencies and constraints will affect its children like in standard editable summary tasks, see above.
  • Dynamic change between summary and normal task

    You can let users to move rows by dragging (permitted by Cfg attribute Dragging='1', it is on by default) or attach actions




    to some TreeGrid events, e.g. to OnClick to toolbar button.
    To automatically change between summary and normal task set row attribute


    to normal row default name (often 'R') and


    to summary row default name.
    If something is needed to do when changing the row default, it can be done in OnChangeDef API event.
    The row default and behavior will be changed whenever the row looses its last child (by move or delete, becomes normal task) or it gets its first child (by move or add, becomes summary task).