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

10. Run external drag

Dragging runs from outside, add boxes on demand, mark actual time and other features

Task A Task B   Task D
  • Dragging run from outside

    In the outside html tag that represents the run define standard HTML event onmousedown / ontouchstart and call here


    API method with parameters as the dragged tag, the mouse event and the GanttRun that will be created in the Gantt for this tag on drop.

    In this example the DragGanttRunByMouse is called from function DownBox that is called from onmousedown of the four HTML tags (Task A / B / C / D) in bottom toolbar.
  • Show and move actual time in Gantt

    The actual time can be shown in Gantt char by


    attribute. The GanttMark can be set also dynamically in OnReady API event.
    The GanttMark can be defined as vertical line just for actual time or as rectangle from the Gantt start to actual time to e.g. gray out the elapsed time like this example.
    In header the actual time can be marked by


    API event.

    This example sets the GanttMark from Gantt start to actual time with suffix "#20" that is styled by CSS class .GSGanttMark20 to gray out elapsed time.
    This example sets the GanttMark in function UpdateNow that is called every 15 seconds to update the actual time per minute. The interval and first call is set in API event OnReady.
    This example just for demonstration sets actual time always to "10/1/2022 11:35" and moves the time more quickly, see the script line in UpdateNow() marked by @@@ comment.
  • Resize Gantt chart to the whole width

    To resize Gantt chart column to the whole available width it is not possible use RelWidth, but define





    This examples defines GanttSize to show always one day and sets GanttSizeFit = 2 to resize Gantt column if the available width is wider, but to not shrink the Gantt if the available width is narrover.
    To show next or previous day there are two buttons on bottom container (Previous day / Next day) that call custom function ZoomNext that shows next day by API method ScrollToDate.
  • Load next Run boxes on demand

    To download and add new Run boxes to existing Gantt cells, return the <Changes> tag from server side with




    value 512, with the rows and new runs.
    Or add new run boxes by API method



    This example simulates downloading new run boxes on day change in function ZoomNext by adding the new runs from generated XML added by AddDataFromServer API method.
    So every click to Next / Previous day button will download new random boxes in the first row, if the day is shown first time.
  • Custom CSS styles for Run boxes

    This example defines striped background in the Gantt cell by CSS class .GSGantt.
    This example defines custom CSS classes that are assigned to the Run boxes by Class attribute: "OrangeStripes" = .GSGanttOrangeStripesIn, "SingleIcon" = .GSGanttSingleIconIn, "LeftIcon" = .GSGanttLeftIconIn.