Tree Grid is a complex component, featuring HTMl table as it's base. But it uses one of table columns to display nested structure along with folding controls. The result is a tree like display, but with optional properties. Tree Grid also supports Drag and Drop of nodes to arrange them as You like.
When using multi-line binding definition the
data property must
be quoted with single quote (
Setting up Tree Grid is no different than configuring table to be
foreach binding. Each column can have it's
own rendering logic. The difference is that
binding must be used instead of said
data of binding can be either model containing
nested structure or array of node models
This example uses model with
children property initialization,
for array initialization check feeding with array example.
It is recommended to place
treegrid binding on
tag, so that table headers can be added too. To display nested structure
with folding controls, add span with
treegridnode binding to
chosen column. It does not have to be first one, any will do.
treegrid binding has also extra configurable parameters:
childrenField- field containing child elements in each node
nodeIcon- path to file which will be used as node icon
autoExpand- boolean value, will automatically open all nodes
dnd- boolean value, enable Drag'n'Drop support
activeClass- string value, CSS classes that will be added to activated node
expanderIcon- string value, HTML element template for expander. By default it is using glyphicon . There is only one type of icon for expander, as it is simply rotated. The icon should be some kind of triangle pointing down.
This design approach gives great freedom of arranging Tree Grid. It looks
like it require a lot of HTML markup, but it is old plain table with
Items can be dragged and dropped between trees too. Trees are protected against recursive loop.