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' }
    ]
});

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' }
    ]
});

Useful configs

Config	Description
expandIconCls	Icon for expanded nodes
collapseIconCls	Icon for collapsed nodes
leafIconCls	Icon for leaf nodes
expandedFolderIconCls	Icon for expanded folder nodes
collapsedFolderIconCls	Icon for collapsed folder nodes

Configs

Configs are options you supply in a configuration object when creating an instance of this class

renderer : Function
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.

As the TreeColumn adds its own cell content to the column, there is a limit to what is supported in the renderer function in comparison with an ordinary Column renderer. Most notably is that changing `cellElement` content can yield unexpected results as it will be updated later in the rendering process.

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;
        }
    ]
});
```
You should never modify any records inside this method.

When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.
Parameters
- renderData : Object
  
  Object containing renderer parameters
- cellElement : HTMLElement
  
  Cell element, for adding CSS classes, styling etc. Can be null in case of export
- value : *
  
  Value to be displayed in the cell
- record : Model
  
  Record for the row
- column : Column
  
  This column
- grid : GridBase
  
  This grid
- row : Row
  
  Row object. Can be null in case of export. Use the row's API to manipulate CSS class names.
- size : Object
  
  Set size.height to specify the desired row height for the current row. Largest specified height is used, falling back to configured rowHeight in case none is specified. Can be null in case of export
- height : Number
  
  Set this to request a certain row height
- configuredHeight : Number
  
  Row height that will be used if none is requested
- isExport : Boolean
  
  true if record is being exported to Excel/textual format to allow special handling during export.
- isMeasuring : Boolean
  
  True if the column is being measured for a resizeToFitContent call. In which case an advanced renderer might need to take different actions.
Returns

String/DomConfig/null
Has a corresponding runtime renderer property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTreeColumn : Booleantrue

READONLY

static

ADVANCED

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

isTreeColumn : Booleantrue

READONLY

ADVANCED

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

renderer : Function

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.

As the TreeColumn adds its own cell content to the column, there is a limit to what is supported in the renderer function in comparison with an ordinary Column renderer. Most notably is that changing `cellElement` content can yield unexpected results as it will be updated later in the rendering process.

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;
        }
    ]
});

You should never modify any records inside this method.

When using the Bryntum React wrapper, this renderer can also return JSX elements. See renderer for a JSX example and performance considerations.

Has a corresponding renderer config.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-tree-cell-gap	Gap between the internals of a tree cell
--b-tree-expander-color	Color of the expander icon
--b-tree-expander-icon-font-size	Size of the expander icon (font icon)
--b-tree-icon-color	Color of a tree icon
--b-tree-icon-width	Width of the tree icon
--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-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)
--b-tree-line-width	Width of a tree line
--b-tree-loading-icon	Icon to display when loading children (font icon)
--b-tree-parent-color	Parent row's color
--b-tree-parent-font-weight	Parent row's font-weight

TreeColumn

Snippet

Cell renderers

Alternative: tree: true config

Useful configs

See also

Configs

Parameters

Returns

Properties

CSS variables

Source path

Inheritance tree4

Mixins6

Contents