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

Zooming in chart, zoom levels and smooth zoom

Source: 02-Zoom.xml

  • For next options in zooming see Gantt paging tutorial.
  • The Gantt

    Zoom size

    is defined by two attributes




    See documentation for Zoom options.
    GanttUnits specifies base display units in chart and GanttWidth specifies width of the one GanttUnits in pixels.
    Remember, GanttUnits are used only for display, size of unit in data is set by GanttDataUnits and is independent on zoom setting.
    • GanttUnits for dates are:
      'ms' - milliseconds, 'ms10' - 10 milliseconds, 'ms100' - 100 milliseconds,
      's' - seconds, 's2' - 2 seconds, 's5' - 5 seconds, 's10' - 10 seconds, 's15' - 15 seconds, 's30' - 30 seconds,
      'm' - minutes, 'm2' - 2 minutes, 'm5' - 5 minutes, 'm10' - 10 minutes, 'm15' - quarters of hour, 'm30' - halves of hour,
      'h' - hours, 'h2' - 2 hours, 'h3' - 3 hours, 'h6' - quarters of day, 'h8' - thirds of day, 'h12' - halves of day,
      'd' - days, 'w' - weeks (starting by Sunday), 'w1' - weeks (starting by Monday, in Hirji starts by Saturday),
      'M' - months, 'M3' - quarters of year, 'M6' - halves of year, 'y' - years.
    • GanttUnits for numbers are set by any number like '1', '10', '13', '1.3', '0.01' and so on.
    • It is possible also to define custom GanttUnits units by AddGanttUnits API function.
  • The Gantt

    Data unit size

    is defined by


    and is independent on zoom setting.
    See documentation for Data units.
    The GanttDataUnits specify the unit size for duration of main bar, lag of dependencies or width of Run boxes.
    The GanttDataUnits are the same values as GanttUnits listed above.
    • The units can be extended by


      , this attribute defines list of possible suffixes and their multiply values.
      For example GanttDataUnits='h' GanttDataModifiers='h:1,d:8,w:40', so GanttDuration for two weeks can be '2w', '10d', '80h' or '80'.
  • Predefined

    Zoom levels

    are set in root Zoom tag by individual Z tags.
    See documentation for Zoom selection.
    Every Z tag has set its Name attribute and the zoom attributes like GanttUnits to preset them.
    When some zoom level is chosen, from Z tag are copied all its attributes (except Name) to the Gantt column.
    So the Z tag can contain attributes affecting zoom, but not attributes affecting data or calculations.
    Usual attributes that Z tag defines are: GanttUnits, GanttWidth, GanttChartRound, GanttHeader and GanttBackground.
    It is possible to define different set of attributes used when set GanttHideExclude='1', by suffix Ex, for example GanttWidth='20' GanttWidthEx='43'.
  • Initial zoom size and position

    Zoom chosen on start is defined by


    attribute, assign here the Name of the Z tag.
    To zoom and scroll to some date on start, define


    attribute, useful especially for high zoom levels, when the whole chart is not visible on start.
  • Cookies

    Actual zoom level and unit width is stored in cookies and restored next time. It can be suppressed by <Cfg> attribute GanttLap='1'.
    It is possible to save also actual scroll position by setting <Cfg> attribute ScrollLeftLap='0'.
  • Synchronization

    The zoom level and position can be synchronized between two or more grids. To have more Gantt charts placed vertically, e.g. to have more vertically scrolled Gantt chart sections.
    Set <Cfg> attribute Sync to all the synchronized grids, use flags Zoom and Horz, optionally also Sec.
  • GanttSmoothZoom

    ='1' permits increasing GanttWidth of the selected zoom level to show exactly the selected range (by clicking to header date or choosing range in header or by API).
    In this case the GanttWidth defines minimal unit width for the zoom level.
    If set GanttSmoothZoom='0', the GanttWidth is always preserved, so the zoom works roughly, just chooses the nearest zoom level for selected range.
  • Zoom actions

    All the zoom actions can be changed, disabled or attached to different events in Actions tag, by default defined in Defaults.xml.
    • Left click to some header date zooms to the date, to be the one date unit as wide as visible area of the chart.
      It is done by action ZoomHeader attached to OnClickGanttHeader event.
    • Selecting date range in header by mouse dragging zooms to selected range, to be the range as wide as visible area of the chart.
      It is done by action ZoomGantt attached to OnDragGanttHeader event.
    • Right click to header anywhere undoes last zoom action. Or if there is no previous zoom action, zooms out by one level.
      It is done by actions UndoZoom and ZoomOut attached to OnRightClickGanttHeader event.
    • Toolbar buttons ZoomIn and ZoomOut zooms in and out by one zoom level. If there is no more zoom level, do nothing.
      It is done by actions ZoomIn and ZoomOut attached to OnClickButtonZoomIn and OnClickButtonZoomOut events.
    • Toolbar button ZoomFit to show the whole chart as wide as possible without showing horizontal scrollbar.
      It is done by action ZoomFitAll attached to event OnClickButtonZoomFit.
    • Zoom levels combo to choose the zoom level from list.
      It can be added to grid by defining Space cell of Type SelectGanttZoom.
    • Zoom to fit particular bar is done by action ZoomBar. It can be run also from right click Gantt menu. This example attaches it to double click to the bar.
      Zoom to fit all Gantt objects in particular Gantt cell is done by action ZoomAll. It can be run also from right click Gantt menu.
  • Width limitation

    for the zoomed charts.
    Maximal width of the Gantt column in pixels is set by


    There is also internal limitation for various browsers, maximal width for IE7 and IE8/9 quirks mode is 178 957 pixels, except if used GanttPaging. Old versions of Opera were limited by 23 000 pixels.
    Maximal width for IE in GanttPaging is 1 193 049 for IE8 strict mode, 1 342 177 for IE8 quirks mode and 1 533 918 for other IE versions. Other browsers are not limited.
    When the width of the column reaches the limit, it shows only part of the chart. The next hidden parts can be accessed only by zooming out and selecting another part to zoom in.
    To display too narrow Gantt wide at least specified width set MinWidth attribute.
  • Zoom API

    • ChangeZoom changes zoom level to given one.
    • ZoomTo zooms to given date range, to show it as wide as possible.
    • ScrollToDate scrolls to given date, even if it is in hidden part of chart due zoom width limitation.
    • OnZoom event is called on every zoom or chart size change.