10. Auto tree
Automatic row and column tree
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"/>