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

1. Simple Main bar and Milestone

Continuous bar or one milestone

  • There are five tutorials for Gantt task types and features:
  • See documentation for Main bar
  • By default is main bar set by






    . If defined both columns end and duration, the third value is always calculated according to the two others.
  • If set GanttLastUnit, the set end date is increased by this one unit (usually 'd' as day), the GanttEnd means the last unit in this case.
  • To support dependencies, resources, manual start, percentage completion and disabled / locked state there must be set


    to the main bar plan like "Main", "Main1", "Main2", ... or for all plans as "All". Default setting is GanttTask="Main" = only the first main bar plan supports the task features.
  • Milestone

    is created when set only GanttStart or GanttEnd or GanttDuration is 0.
    There is difference between start milestone and end milestone. The end milestone is affected by GanttLastUnit and also if the milestone is set within excluded range, the end milestone is shown before the range and start milestone after the range.
    The milestone has only two states: complete (GanttComplete=100) and incomplete.
    By GanttMilestones is possible to permit creating only tasks, only milestones or both.
  • Main bar


    is defined by


    attribute. Main bar can show any text or html code. Milestone cannot show any content.
    The GanttHtml often links the main bar user text defined by


    The main bar content can be generated also dynamically by OnGetGanttHtml API event.
  • Main bar

    side text

    . Main bar can show two side texts or any HTML content. The side texts are defined by




    The texts horizontal position is controlled by GanttHtmlLeftEdge and GanttHtmlRightEdge, the available positions are before, inside left, centered, inside right and after.
    Vertical position is set by GanttHtmlShift. It is also possible to generate the side texts by API event OnGetGanttSideHtml to achieve any count and positions of the main bar side content.
  • Main bar


    is defined by


    . Milestone tooltip is defined by GanttMilestoneTip. The tip can show any text or html code.
    By default the main bar tooltip shows user text defined by


    The main bar and milestone tooltip can be generated also dynamically by OnGanttTip API event.
  • Task

    percentage completion

    is set by


    attribute in range 0 - 100.
    The completion state is shown only if the main bar plan is included in GanttTask, see above.
    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.
  • Task can be




    . The state is set by


    attribute or column.
    The disabled / locked state is used only if the main bar plan is included in GanttTask, see above.
    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 task, remove the main bar plan from GanttEdit and also set CanEdit='0' to all the source cells.
  • Dependencies

    are attached always for the whole main bar. Normally by


    or by


    If the GanttTask contains only one main bar plan and also no run/box, the main bar need not be identified for dependency and the row id is enough, e.g. GanttDescendants = "R1" or "R2#11;R3"
    If the are more flags in GanttTask, the main bar is identified by its plan number, 0 for the first one, e.g. GanttDescendants="0@R1" or "1,1@R2#11;0,1@R3"
    See documentation for Defining dependencies.
  • Manual start

    for correcting dependencies is set by


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

    are attached by GanttResources.
    See documentation for Resources assign.
  • Main bar


    can be controlled by


    attribute. For side texts by GanttHtmlLeftClass and GanttHtmlRightClass.
    For milestones can be set special class by GanttMilestoneClass. The milestone class specifies predefined or custom icon for milestone.
    There are predefined 17 standards colored bars and 10 colored milestones.
  • The main bar can show

    side icons

    on one or both its sides just for visual effect, set by GanttIcons.
    The icons can be default icons for summary tasks or any custom icons defined by GanttIconLeft and / or GanttIconRight.
  • Main bar

    position and height

    . Main bar can be shifted vertically by GanttTop attribute.
    The height of the main bar can be set by GanttHeight attribute.
  • Main bar can be controlled also from JavaScript by


    , especially by methods GetGanttMain and SetGanttMain and events OnGanttMainChange and OnGanttMainChanged.