v7.3.0

TreeGrid
Widget

A TreeGrid combines hierarchical tree data with a full-featured grid. It must be configured with exactly one TreeColumn (type: tree), but can also have an arbitrary number of other columns. Most features that can be used with Grid also work with TreeGrid, except the Group feature.

const treeGrid = new TreeGrid({
    appendTo : document.body,
    columns  : [
        { type : 'tree', field : 'name', text : 'Name', flex : 1 },
        { field : 'size', text : 'Size', width : 100 }
    ],
    data : [
        {
            name     : 'Documents',
            expanded : true,
            children : [
                { name : 'Report.pdf', size : '2.1 MB', leaf : true },
                { name : 'Notes.txt', size : '12 KB', leaf : true }
            ]
        }
    ]
});

Using a Store configured with lazyLoad is not supported in TreeGrid.

Useful configs and functions

Member Description
store Tree store (must have tree: true)
columns Must include one { type : 'tree' } column
toggleCollapse Expand or collapse a node
collapse Collapse a single node
expand Expand a single node
expandAll Expand all tree nodes
collapseAll Collapse all tree nodes

See also

  • Grid - Non-tree grid
  • TreeColumn - The required tree column type
  • Tree - Tree feature handling expand/collapse
  • Store - Data store (configure with tree: true)
No results

Configs

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

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isTreeGrid : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of TreeGrid class, or subclass thereof.

Functions

Functions are methods available for calling on the class