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

2. Main bar parts

Discrete main bar with more milestones

  • There are five tutorials for Gantt task types and features:
  • See documentation for Main bar
  • The discrete main bar is defined by


    attribute, as one or more date ranges like "1/1/2010~1/3/2010;1/8/2010~1/12/2010".
    It is also possible to define the attributes GanttStart, GanttEnd and GanttDuration, their values will be calculated from the GanttParts.
  • If set GanttLastUnit, the set end date is increased by this one unit (usually 'd' as day), the second date in every range in GanttParts and the GanttEnd means the last unit in this case.
  • The individual parts of the discrete main bar cannot be individually identified, after move or resize they are automatically joined and sorted. To have individually identified parts use GanttRun instead, see 4. Main bar by Run.
    When moving one main bar part on another, they are automatically


    . To not join them set GanttJoin attribute to 0 or -1.
    If you want to overlay the boxes with some text on them, you can set GanttTextOverlay='1' to show only one text at one place.
  • 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.
    Dependencies are always attached to the whole task - only to start of the first part and / or to end of the last part. To attach dependencies or resources to individual boxes, use GanttRun instead.
  • Milestone

    is created as a range with only start or end defined, like "1/10/2010~" as start milestone or "~1/1/2010" as end milestone.
    Don't confuse with range defined only by one date like "1/10/2010" - it means one day bar.
    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.
    There can be more milestones or bars and milestones together in one main bar, but for the Gantt calculation it has no effect.
  • Main bar


    is defined by


    attribute. Main bar can show any text or html code. Milestone cannot show any content.
    The content is for all the parts the same, but it can show the part specific index or start date, end date or duration. The discrete main bar usually does not show user text defined by GanttText attribute, because it would be shown in every part.
    The main bar content can be generated also dynamically for every part different 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.
    By the API event create especially different content for individual parts.
  • Main bar


    is defined by


    . Milestone tooltip is defined by GanttMilestoneTip. The tip can show any text or html code.
    The tip is for all the parts the same, but it can show the part specific index or start date, end date or duration. By default the main bar tooltip shows user text defined by


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

    percentage completion

    is set by


    attribute in range 0 - 100.
    The task completion is set and calculated for the whole task, not for the individual parts.
    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.
    Only the whole task can be disabled or locked, not the individual parts. 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 not to individual parts. Normally by


    or by


    To the first part are attached start dependencies, to the last part are attached finish dependencies.
    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. There are also special interrupt icons that can be shown between the main bar parts.
  • 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.
    All parts in one main bar have the same height and vertical position. Except the part height is updated according to the part content.
  • When


    the first part of the discrente main bar by dragging, all parts are moved. When dragging other parts, only the one part is moved. This behavior can be changed by assigning different actions to the drag events.
    When moving discrete main bar for correcting dependencies, always the whole bar moved, all the spaces between parts are preserved.
  • Main bar can be controlled also from JavaScript by


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