Tree

Feature that makes the grid work more like a tree. Included by default in TreeGrid. Requires exactly one TreeColumn among grids columns. That column will have its renderer replaced with a tree renderer that adds padding and icon to give the appearance of a tree. The original renderer is preserved and also called.

Tree

//<code-header>
fiddle.title = 'Tree';
//</code-header>
targetElement.innerHTML = '<p>Tree feature requires a store with <code>{ tree: true }</code> and a TreeColumn among columns</p>';

const grid = new Grid({
    appendTo : targetElement,

    height : 500,

    features : {
        tree : true
    },

    store : {
        tree : true,
        data : [
            {
                id       : 1,
                name     : 'ABBA',
                iconCls  : 'b-icon fa-users',
                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,
                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 }
    ]
});

This feature is disabled by default. When enabled, the feature cannot be disabled during runtime.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

Keys	Action	Action description
`Space`	toggleCollapseByKey	When focus on a parent node, this expands or collapses it's children
`ArrowRight`	expandIfSingleColumn	Expands a focused parent node if grid consist of one column only
`Shift`+`ArrowRight`	expandByKey	Expands a focused parent node
`ArrowLeft`	collapseIfSingleColumn	Collapses a focused parent node if grid consist of one column only
`Shift`+`ArrowLeft`	collapseByKey	Collapses a focused parent node

Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide

Configs

Common

disabledInstancePlugin

listenersEvents

Other

expandOnCellClick: Boolean= falseAlso a property

Expand parent nodes when clicking on their cell

keyMap: Object<String, KeyMapConfig>

See Keyboard shortcuts for details

treeLines: Boolean= falseAlso a property

Show or hide tree lines

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isTree: Boolean= truereadonly

Identifies an object as an instance of Tree class, or subclass thereof.

isTree: Boolean= truereadonlystatic

Identifies an object as an instance of Tree class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

expandOnCellClick: Boolean= falseAlso a config

Expand parent nodes when clicking on their cell

treeLines: Boolean= falseAlso a config

Show or hide tree lines

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

Tree

collapse

Collapse a single node. This function is exposed on Grid and can thus be called as grid.collapse()

Parameter	Type	Description
`idOrRecord`	String \| Number \| Model	Record (the node itself) or id of a node to collapse

collapseAll

Collapse all nodes. This function is exposed on Grid and can thus be called as grid.collapseAll()

expand

Expand a single node. This function is exposed on Grid and can thus be called as grid.expand(idOrRecord)

Parameter	Type	Description
`idOrRecord`	String \| Number \| Model	Record (the node itself) or id of a node to expand

expandAll

Expand all nodes. This function is exposed on Grid and can thus be called as grid.expandAll()

expandOrCollapseAll

Expand or collapse all nodes, as specified by param, starting at the passed node (which defaults to the root node)

Parameter	Type	Description
`collapse`	Boolean	Set to `true` to collapse, `false` to expand (defaults to `true`)
`topNode`	Model	The topmost node from which to cascade a collapse. Defaults to the rootNode. Not included in the cascade if the root node is being used.

expandTo

Expands parent nodes to make this node "visible". This function is exposed on Grid and can thus be called as grid.expandTo()

Parameter	Type	Description
`idOrRecord`	String \| Number \| Model \| String[] \| Number[] \| Model[]	Record (the node itself), or id of a node. Also accepts arrays of the same types.
`scrollIntoView`	Boolean	A flag letting you control whether to scroll the record into view

expandToLevel

Expands the parent nodes in the tree to the provided depth.

Parameter	Type	Description
`level`	Number	The depth to expand to. Passing level `0` means the top level root parents will be expanded.
`collapseAll`	Boolean	Pass `true` to collapse all nodes before expanding

toggleCollapse

Collapse an expanded node or expand a collapsed. Optionally forcing a certain state. This function is exposed on Grid and can thus be called as grid.toggleCollapse()

Parameter	Type	Description
`idOrRecord`	String \| Number \| Model	Record (the node itself) or id of a node to toggle
`collapse`	Boolean	Force collapse (true) or expand (false)

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeToggleNode

Fired before a parent node record toggles its collapsed state.

// Adding a listener using the "on" method
tree.on('beforeToggleNode', ({ source, record, collapse }) => {

});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record being toggled.
`collapse`	Boolean	`true` if the node is being collapsed.

collapseNode

Fired before a parent node record is collapsed.

// Adding a listener using the "on" method
tree.on('collapseNode', ({ source, record }) => {

});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record which has been collapsed.

expandNode

Fired after a parent node record is expanded.

// Adding a listener using the "on" method
tree.on('expandNode', ({ source, record }) => {

});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record which has been expanded.

toggleNode

Fired after a parent node record toggles its collapsed state.

// Adding a listener using the "on" method
tree.on('toggleNode', ({ record, collapse }) => {

});

Parameter	Type	Description
`record`	Model	The record being toggled.
`collapse`	Boolean	`true` if the node is being collapsed.

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onBeforeToggleNode

Called before a parent node record toggles its collapsed state.

new Tree({
    onBeforeToggleNode({ source, record, collapse }) {

    }
});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record being toggled.
`collapse`	Boolean	`true` if the node is being collapsed.

onCollapseNode

Called before a parent node record is collapsed.

new Tree({
    onCollapseNode({ source, record }) {

    }
});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record which has been collapsed.

onExpandNode

Called after a parent node record is expanded.

new Tree({
    onExpandNode({ source, record }) {

    }
});

Parameter	Type	Description
`source`	Grid	The firing Grid instance.
`record`	Model	The record which has been expanded.

onToggleNode

Called after a parent node record toggles its collapsed state.

new Tree({
    onToggleNode({ record, collapse }) {

    }
});

Parameter	Type	Description
`record`	Model	The record being toggled.
`collapse`	Boolean	`true` if the node is being collapsed.

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

Tree

Keyboard shortcuts

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Tree

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs