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


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

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


1. Calendars exclude


1. Resources 2. Availability

2. Filtering rows in tree

Various ways to filter rows in parent / child relation

  • There are two special attributes for filtering in tree Cfg


    and row


    For all other information about filtering see previous example 01-Filtering_rows.html.
  • Hide all not found

    By default is set Cfg attribute StandardFilter='0' and all row attributes CanFilter='1'.
    It tests parent rows before their children. If the parent row does not fulfill the filter condition, it is hidden and its children are not tested at all.
    It is the fastest method. It cannot be used with OnRowFilter API event, when this event filters parents according to their children.
    Use it when some rows, especially leaf rows without children, cannot be hidden by filter (have set CanFilter='0').
  • Hide all not found, iterate all

    When set Cfg attribute StandardFilter='1', it tests row children before the row itself.
    It also hides all rows that do not pass the filter like previous option, but there can be used OnRowFilter API event if it filters rows according to their children.
    Use it with OnRowFilter code based on row children.
  • Show all found

    It shows all rows that fulfill the filter condition. If any parent contains some visible child, it is shown too.
    It is set by Cfg attribute StandardFilter='2'.
    It tests children before parents, so it also supports OnRowFilter in all cases.
    Use it when all rows can be hidden by filter, to show all the found rows.
  • Show all found, with all children

    It shows all rows that fulfill the filter condition. It always shows all children of found parents.
    It is set by Cfg attribute StandardFilter='3'.
    It tests parent rows before their children. It tests children of parent that does not fulfill the filter condition.
    Use it when all rows can be hidden by filter, to show all the found rows with children.
  • Show all found, hide empty parents

    It shows all rows that fulfill the filter condition. Parent rows are visible only if they contain some visible children.
    It is set by Cfg attribute StandardFilter='2' and row CanFilter='2' or '3'.
    The CanFilter='2' / '3' should not be set to the rows without children, otherwise they will be always hidden.
    If the row has set CanFilter='2' or '3', it is hidden if it does not have any visible children, regardless it fulfills the filter condition.
    If set CanFilter='2' the row is not tested for the filter condition and it visible or hidden only by its children.
    Use it show all found rows, but hide all unused groups.