News in version
Buy Try it free
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
TreeGrid SpreadSheet Examples Documentation References
Gantt chart Download Licensing & prices Contacts
TreeGrid Examples Download
Gantt chart Documentation References
SpreadSheet Licensing & prices Contacts
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

10. Auto tree

Automatic row and column tree

Source: 10-Auto_tree.xml

  • Automatic row tree


    To create row tree automatically, place all rows directly to <B> tag and set their

    Level

    attribute to the level where the row should be placed. 0 means root row, 1 first level, ...
    Next row can have Level maximally by 1 higher than previous row. In reversed tree previous row can have Level maximally by 1 higher than next row.
    To collapse row's children, set row attribute Expanded='0'.
  • Set also

    MainCol

    normally to colum where to show the tree.
    To automatically update width of the main column when maximal Level changes, set AutoTreeWidth to the reserved width for the main column value.
    In auto tree it is usually set IndentType to 1 or 2 to preserve row position when indenting / outdenting it.
    To show the Levels buttons to expand rows to given level add xxxLevels to <Header> tag, where the xxx is the MainCol value.
    If all rows have set Level='0', the tree can be automatically hidden. To hide it automatically, set <Cfg HideEmptyTree='1'/>.
    To not show the tree lines and buttons in the MainCol, but still provide the most of tree features, set <Cfg HideTree='1'/>.
    To reverse tree set <Cfg ReversedTree='1'. The parent rows will be displayed below their children like in MS Excel by default.

  • Automatic column tree


    To permit and show auto column tree set <Cfg

    ColTree

    to 3 or 4.
    The value 4 shows reversed tree, with parents right to the children, like in MS Excel by default.
    To not show the ColTree rows with tree lines and buttons, but still provide the most of tree features, set <Cfg ColTree='2'/>.
  • To create column tree automatically, set

    Level

    in column <C> tags. Set the Level to the level where the column should be placed. 0 means root row, 1 first level, ...
    Next column can have Level maximally by 1 higher than previous column. In reversed tree previous column can have Level maximally by 1 higher than next column.
    To collapse column's children, set Visible='0' to all the child columns.
  • The auto column tree adds one fixed row per column level, with lines and expand / collapse buttons. These rows get Def="ColTree".
    The ColTree rows are placed by default above the first header, to place them somewhere else add <I Def='ColTree'/> to the position in <Head> or <Foot> section.
    It is possible to limit the count of the ColTree rows by <Cfg MaxColLevel, default limit is 10.
    To show the Level buttons to expand columns to given level add xxxLevel to the default row "ColTree", like <Def><D Name="ColTree" xxxButton="Level" /></Def> where the xxx is the column where to show the buttons - the column should not be part of the tree.
    By default there is added one last ColTree row just to support Level button to expand all columns, to hide this last row set <Cfg ColTreeLast='0'.

  • Custom formula functions


    This example shows also using custom formula functions, here are defined three functions calccnt(), getrowlevel(), getcollevel().
    The functions are defined as global JavaScript functions in <script> tag in the HTML page.
    They are assigned to TreeGrid in <Lang> as <FormulaFunctions getcollevel="getcollevel" getrowlevel="getrowlevel" calccnt="calccnt"/>
    The functions are not exported to xlsx, it is set by <Cfg NoExportFunc="getcollevel,getrowlevel,calccnt"/>