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 Large table with paging Large table without paging Multiline & images - books Positions and spanning Photo album - images Dynamic Adobe Flash Dynamic MS SilverLight PivotTable - 2D grouping Schools - list and ratings File and directory browser Extended JavaScript API Sharing & synchronisation 1 000 000 rows, 1 000 cols

Sheets

Microsoft Excel sheet TreeGrid sheet

Gantt and bar charts

Gantt & Network chart Simple Gantt chart Big Gantt chart - 1000 rows Gantt chart tree by grouping Resources usage chart Run chart - bar chart Grouping bars - run groups 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

Dragging

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

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

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 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

Calendars

1. Calendars exclude

Resources

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

    GanttStart

    and

    GanttEnd

    or

    GanttDuration

    . 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

    GanttTask

    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

    content

    is defined by

    GanttHtml

    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

    GanttText

    attribute.
    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

    GanttHtmlLeft

    and

    GanttHtmlRight

    .
    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

    tooltip

    is defined by

    GanttTip

    . 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

    GanttText

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

    percentage completion

    is set by

    GanttComplete

    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

    disabled

    or

    locked

    . The state is set by

    GanttDisabled

    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

    GanttDescendants

    or by

    GanttAncestors

    .
    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

    GanttManual

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

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

    style

    can be controlled by

    GanttClass

    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

    API

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