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

Sheets

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

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

Calendars

1. Calendars exclude

Resources

1. Resources 2. Availability

3. Paging in Gantt chart

Paging options for Gantt chart

Source: 03-Paging.xml   03-Data.xml   Gantt is paged by pagers and next by horizontal scroll.
Click to pager page to scroll to the page without zoom change. Click to active pager page (in blue) or to pager with pink or green cursor to zoom to the exact page width (except in Pagers Hrs and Mins).
In pagers the blue cursor is active page. Pink is window position in the chart by scroll, if the zoom width is wider than the whole pager range. Green is pager when the window is wider than the whole pager range.
In pagers the green page contains some data, the gray page does not contain any data, the standard "black" page does not highlight if it contains data or not. Gray background page contains only excluded dates.


Source: 03-Paging2.xml   03-Data.xml   Gantt is paged by pagers only, fits to width without horizontal scrollbar.
  • Horizontal paging by side pagers


    Horizontal paging in Gantt chart is always client side, fully managed by TreeGrid.
    The Gantt side pagers can be displayed also with grid pager (type Pages) for root rows and also with custom side pagers.
    See documentation for Side pager type Gantt and documentation for Pager.
    • Define one or more

      side Gantt pagers

      by

      <Pager Type='Gantt'>

      in root tag <Pagers> ... </Pagers>. Pager side can be chosen by its attribute Left.
      Specify <Pager> attributes

      PageSize

      as GanttUnits for every page size and

      ChartSize

      as GanttUnits for the whole pager size.
      By <Pager> attributes ChartLeft and ChartRight you can optionally add next pages on beginning and at the end of the pager to extend ChartSize range.
      By <Pager> attributes

      Click

      and

      DblClick

      specify the action done on click or double click to pager page. How the chart will be scrolled or zoomed.
      Optionally define <Pager> attributes FirstZoom and LastZoom to show the pager only on specified zoom levels and hide it in all others.
      See documentation for Side pager type Gantt for more options.
    • Optionally define one or more

      zoom levels

      by

      <Z>

      tags in root tag <Zoom> ... </Zoom>.
      For every zoom level define Name, GanttUnits, GanttWidth, GanttHeader1(-5) and optionally GanttSize or GanttChartRound, and GanttBackground.
      Initial zoom and position in Gantt define by <C> attributes GanttZoom and GanttZoomDate.
      To not show horizontal scrollbars and let the Gantt to fit its width (like in the second grid) set <C> attribute GanttSizeFit='1' and optionally GanttSmoothZoom='0'.
      See documentation for Zoom options, Zoom selection and Chart size limits
    • It is possible to define

      custom Gantt units

      to be used in PageSize, ChartSize, GanttUnits, GanttHeader, GanttBackground and so on. The custom units cannot be used in GanttExclude.
      The custom units can have even variable size, e.g. this example defines custom units 'wh' as work hours 9:00 - 13:00, 13:00 - 14:00, 14:00 - 18:00, 18:00 - 9:00, see it in top grid in zoom level "All in workhours".
      The custom units are created by global API function AddGanttUnits that should be called before any Gantt chart is created.
      If the custom units have variable length or don't start on 1/1/1970 00:00:00, they must be calculated in API events OnRoundDate and OnIncDate.
      See documentation for Custom Gantt units.
  • Horizontal paging by scroll


    Renders only visible (due horizontal scroll) part of Gantt chart.
    • To switch on the paging by scroll set <C> attribute

      GanttPaging

      ='1' of <C> Gantt column.
    • By <C> attribute GanttPagingFixed you can control paging of head rows, foot rows and Gantt background. The part can be displayed for the whole chart or rendered only for actual page.
      By default is background and foot rows. And Gantt headers can be paged individually by their GanttHeaderPaging1-5 attributes.
    • For Gantt paging is set the default maximal width to 1 193 049 pixels. If the width of the whole displayed Gantt chart becomes wider, it is cut to the maximal width.
      The maximal Gantt width can be increased by <C> MaxWidth attribute, but it will be shrunk in IE browser to its hard limits. 1 193 049 is limit for IE8 strict, 1 342 177 for IE8 quirks and 1 533 918 for other IE versions.
    • See documentation for Horizontal paging by scroll for more options.
  • Vertical paging of rows


    Grid with Gantt chart can have rows paged vertically like normal grid. Can be also freely combined with horizontal Gantt paging.
    • Render root rows on scroll, see documentation for Paging root rows or tutorial 01-Client_root_paging.
    • Render children on expand, see documentation for ChildPaging or tutorial 02-Client_child_paging.
    • Render children on scroll, see documentation for ChildParts or tutorial 02-Client_child_paging.
    • Load root rows on scroll, see documentation for Server paging root rows or tutorial 06-Server_root_paging.
    • Load children on scroll, see documentation for Server ChildPaging or tutorial 07-Server_child_paging.
    • Gantt chart restrictions in server paging (loading rows on demand)
      • Dependencies cannot be linked between tasks in different pages or child pages.
      • Resource charts cannot be calculated from not yet loaded tasks.
      • Chart size cannot be calculated from not yet loaded tasks (GanttSize should not be "" or "0").
      • GanttBase and GanttFinish cannot be automatically calculated from not yet loaded tasks.
      • All Formula summary Gantt functions, e.g. ganttstart(), cannot be calculated from not yet loaded tasks.