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

Movable points with defined icon and text or tooltip

Source: 01-Flags.xml
  • See documentation for Flag.
  • The flags represent custom marks on given dates that show their information as text or tooltip.
    For math charts, to display values from source columns in chart use GanttPoints instead of GanttFlags. See tutorial 02-Points.
    The flag icon is centered to the one GanttUnits right to the flag date.
  • By


    specify if the flags in the cell will be shown as icon (1), text (2) or both (3)
  • Flags are defined by attribute


    The column should be defined as Type='Date' Range='1' Button='' - it should be type Date, but without calendar, because selecting flag dates in calendar will break down the relation between flags and their texts and icons.
  • The flag information is defined in


    It is also range cell, the individual texts are separated by semicolon. The flag text must not contain semicolon. When edited in Gantt, the semicolon is replaced by comma.
    The flag information can be shown as textbox right to the icon, by single textbox or as tooltip for the icon.
  • The flags can show

    custom icons

    instead of the default flag icon. And also

    custom CSS styles

    for the flag text.
    • The icons for individual flags are defined by


      It is also range cell, the individual icons are separated by semicolon. The icons are exact urls to the icon files, paths are relative to the actual page.
    • The actual CSS classes for individual flag texts are defined by


      It is also range cell, the individual classes are separated by semicolon. The values are exact CSS class names. These CSS classes can be define in page embedded style or in external style sheet.
    • It is possible to let users to choose the custom icons and CSS classes for the flag and its text.
      The possible icons are defined in


      attribute. It is first character separated array, not range cell. It contains full urls of the icons. Empty item value means default icon, '-' item value means no icon, only text.
      The possible classes are defined in


      attribute. It is first character separated array, not range cell.
      Users can choose the icon and class for the flag from gantt popup menu. The menu item texts are defined by


      . The item text can contain %1 string to be replaced by the icon and %2 and %3 to be replaced by <span> and </span> tags with custom CSS style.
  • Tooltip for the flags can be formatted by


    to show specific information for the flag like its date, index and its information from GanttFlagTexts.
  • The flag content can be generated dynamically by JavaScript API.
    The text HTML content can be created by OnGetGanttFlagText API event. The icon by OnGetGanttFlagIcon.
    By API event OnGetGanttFlagIconHover is possible also to define or change icon shown on mouse hover.
  • By default the texts in Gantt chart are shown above the Gantt objects. Set


    ='1' to suppress the behavior. This setting can slow down the chart, so do it only if you really need it.
  • The Flags can be moved by mouse also to another row if set


    Only Run bars and Flags can be moved between rows. The Run bars can be moved also between grids, but Flags cannot.
    The Flags dragging can be controlled by API events OnStartDragGantt, OnDragGantt and OnEndDragGantt and also by events OnGanttFlagMove / OnGanttFlagMoved for moving between rows and OnGanttChange / OnGanttChanged for moving inside row.