TreeColumn
A column that displays a tree structure when using the Tree feature.
Default editor is a TextField.
TreeColumn provides configs to define icons for expanded / collapsed nodes, expanded folder / collapsed folder nodes and leaf nodes.
When the TreeColumn renders its cells, it will look for two special fields href
and target. Specifying href will produce a link for the TreeNode,
and target will have the same meaning as in an A tag:
{
id : 1,
name : 'Some external link'
href : '//www.website.com",
target : '_blank"
}
Snippet
new TreeGrid({
appendTo : document.body,
columns : [
{ type: 'tree', field: 'name' }
]
});
//<code-header>
fiddle.title = 'Tree column';
//</code-header>
// grid with TreeColumn
const grid = new Grid({
appendTo : targetElement,
// makes grid as high as it needs to be to fit rows
autoHeight : true,
features : {
tree : true
},
store : {
tree : true,
data : [
{
id : 1,
name : 'ABBA',
iconCls : 'b-icon fa-users',
expanded : true,
children : [
{ id : 11, name : 'Anni-Frid', iconCls : 'b-icon fa-user' },
{ id : 12, name : 'Bjorn', iconCls : 'b-icon fa-user' },
{ id : 13, name : 'Benny', iconCls : 'b-icon fa-user' },
{ id : 14, name : 'Agnetha', iconCls : 'b-icon fa-user' }
]
},
{
id : 2,
expanded : true,
name : 'Roxette',
iconCls : 'b-icon fa-users',
children : [
{ id : 21, name : 'Per', iconCls : 'b-icon fa-user' },
{ id : 22, name : 'Marie', iconCls : 'b-icon fa-user' }
]
}
]
},
columns : [
{ type : 'tree', field : 'name', text : 'Name', flex : 1 }
]
});Cell renderers
You can affect the contents and styling of cells in this column using a renderer function.
const grid = new Grid({
columns : [{
type : 'tree',
field : 'name',
text : 'Name',
renderer({ value, record }) {
return `${value} (${record.childLevel})`
}
}]
});
Alternative: tree: true config
Instead of using type: 'tree', you can add tree rendering to any column type by
configuring it with tree: true:
const grid = new TreeGrid({
columns : [
// These are equivalent:
{ type: 'tree', field: 'name' },
{ field: 'name', tree: true },
// Any column type can be a tree column:
{ type: 'resourceInfo', tree: true, field: 'name' },
{ type: 'check', tree: true, field: 'done' }
]
});
Configs
86
Configs
86Common
Other
The icon to use for a parent node in collapsed state
The icon to use for the expand / collapse button in expanded state
The icon to use for a parent node in expanded state
The icon to use for the expand / collapse button icon in collapsed state
Size of the child indent in em. Resulting indent is indentSize multiplied by child level.
Sets the --b-tree-indent-size CSS variable. By default, the value of the variable set by the theme is
used.
The icon to use for the leaf nodes in the tree
Rendering
Renderer function, used to format and style the content displayed in the cell. Return the cell text you want to display. Can also affect other aspects of the cell, such as styling.
You can also return a DomConfig object describing the markup
new Grid({
columns : [
{
type : 'tree',
field : 'name'
text : 'Name',
renderer : ({ record }) => {
return {
class : 'myClass',
children : [
{
tag : 'i',
class : 'fa fa-pen'
},
{
tag : 'span',
text : record.name
}
]
};
}
}
]
});
You can modify the row element too from inside a renderer to add custom CSS classes:
new Grid({
columns : [
{
type : 'tree',
field : 'name',
text : 'Name',
renderer : ({ record, row }) => {
// Add special CSS class to new rows that have not yet been saved
row.cls.newRow = record.isPhantom;
return record.name;
}
]
});
| Parameter | Type | Description |
|---|---|---|
renderData | Object | Object containing renderer parameters |
renderData.cellElement | HTMLElement | Cell element, for adding CSS classes, styling etc. Can be |
renderData.value | * | Value to be displayed in the cell |
renderData.record | Model | Record for the row |
renderData.column | Column | This column |
renderData.grid | GridBase | This grid |
renderData.row | Row | Row object. Can be null in case of export. Use the row's API to manipulate CSS class names. |
renderData.size | Object | Set |
renderData.size.height | Number | Set this to request a certain row height |
renderData.size.configuredHeight | Number | Row height that will be used if none is requested |
renderData.isExport | Boolean |
|
renderData.isMeasuring | Boolean | True if the column is being measured for a |
Integration
Interaction
Menu
Misc
Properties
158
Properties
158Common
Class hierarchy
Other
The icon to use for a parent node in collapsed state
The icon to use for the expand / collapse button in expanded state
The icon to use for a parent node in expanded state
The icon to use for the expand / collapse button icon in collapsed state
Size of the child indent in em. Resulting indent is indentSize multiplied by child level.
Sets the --b-tree-indent-size CSS variable. By default, the value of the variable set by the theme is
used.
The icon to use for the leaf nodes in the tree
Rendering
Renderer function, used to format and style the content displayed in the cell. Return the cell text you want to display. Can also affect other aspects of the cell, such as styling.
You can also return a DomConfig object describing the markup
new Grid({
columns : [
{
type : 'tree',
field : 'name'
text : 'Name',
renderer : ({ record }) => {
return {
class : 'myClass',
children : [
{
tag : 'i',
class : 'fa fa-pen'
},
{
tag : 'span',
text : record.name
}
]
};
}
}
]
});
You can modify the row element too from inside a renderer to add custom CSS classes:
new Grid({
columns : [
{
type : 'tree',
field : 'name',
text : 'Name',
renderer : ({ record, row }) => {
// Add special CSS class to new rows that have not yet been saved
row.cls.newRow = record.isPhantom;
return record.name;
}
]
});
| Parameter | Type | Description |
|---|---|---|
renderData | Object | Object containing renderer parameters |
renderData.cellElement | HTMLElement | Cell element, for adding CSS classes, styling etc. Can be |
renderData.value | * | Value to be displayed in the cell |
renderData.record | Model | Record for the row |
renderData.column | Column | This column |
renderData.grid | GridBase | This grid |
renderData.row | Row | Row object. Can be null in case of export. Use the row's API to manipulate CSS class names. |
renderData.size | Object | Set |
renderData.size.height | Number | Set this to request a certain row height |
renderData.size.configuredHeight | Number | Row height that will be used if none is requested |
renderData.isExport | Boolean |
|
renderData.isMeasuring | Boolean | True if the column is being measured for a |
Editing
Integration
Interaction
JSON
Menu
Misc
Parent & children
Functions
77
Functions
77Configuration
Editing
Events
Identification
Misc
Other
Parent & children
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2CSS variables
13
CSS variables
13| Name | Description |
|---|---|
--b-tree-loading-icon | Icon to display when loading children (font icon) |
--b-tree-icon-width | Width of the tree icon |
--b-tree-cell-gap | Gap between the internals of a tree cell |
--b-tree-parent-font-weight | Parent row's font-weight |
--b-tree-indent-size | Amount to indent each level of the tree |
--b-tree-leaf-icon-font-size | Size of the leaf icon (font icon) |
--b-tree-expander-icon-font-size | Size of the expander icon (font icon) |
--b-tree-expander-color | Color of the expander icon |
--b-tree-parent-color | Parent row's color |
--b-tree-icon-color | Color of a tree icon |
--b-tree-line-width | Width of a tree line |
--b-tree-line-color | Color of a tree line |
--b-tree-line-offset | Offset of the tree line (adjust to align with the apps collapse/expand icon) |