v7.3.0
SupportExamplesFree Trial

TreeGroup
Feature

A feature that allows transforming a flat dataset (or the leaves of a hierarchical) into a tree by specifying a record field per parent level. Parents are generated based on each leaf's value for those fields.

const grid = new TreeGrid({ appendTo : targetElement, // Makes grid as high as it needs to be to fit rows autoHeight : true, // Initial dataset, will be transformed by the TreeGroup feature store : { fields : [ 'name', 'status', 'prio' ], data : [ { id : 1, name : 'Project 1', expanded : true, children : [ { id : 11, name : 'Task 11', status : 'WIP', prio : 'High' }, { id : 12, name : 'Task 12', status : 'Done', prio : 'Low' }, { id : 13, name : 'Task 13', status : 'Done', prio : 'High' } ] }, { id : 2, name : 'Project 2', expanded : true, children : [ { id : 21, name : 'Task 21', status : 'WIP', prio : 'High' } ] } ] }, columns : [ { type : 'tree', field : 'name', text : 'Name', flex : 1 } ], features : { treeGroup : { levels : ['status'], // Customize the cell / row element or the value displayed using parentRenderer parentRenderer({ value, cellElement, row, grid }) { const cls = value === 'Done' ? 'check-circle' : 'clock'; return `<i class="fa-${cls}"></i>${value}`; } } }, tbar : [ { type : 'buttongroup', toggleGroup : true, items : [ { text : 'Status', pressed : true, onToggle({ pressed }) { pressed && grid.group(['status']); } }, { text : 'Prio', onToggle({ pressed }) { pressed && grid.group(['prio']); } }, { text : 'Status + Prio', onToggle({ pressed }) { pressed && grid.group(['status', 'prio']); } }, { text : 'none', onToggle({ pressed }) { pressed && grid.clearGroups(); } } ] } ] });

This feature can be used to mimic multi grouping or to generate another view for hierarchical data. The actual transformation happens in a new store, that contains links to the original records. The original store's structure is kept intact and will be plugged back in when calling clearGroups. When grouping on a column field, the column“s format method will be used to format the value to group by (relevant for NumberColumn, DateColumn etc.)

Any modification of the links is relayed to the original store. So cell editing and other features will work as expected and the original data will be updated.

Combine this feature with GroupBar to allow users to drag-drop column headers to group the tree store.
Please note that this feature requires using a TreeGrid or having the Tree feature enabled.

This snippet shows how the sample dataset used in the demo above is transformed:

const grid = new TreeGrid({
    // Original data
    data : [
        { id : 1, name : 'Project 1', children : [
            { id : 11, name : 'Task 11', status : 'wip', prio : 'high' },
            { id : 12, name : 'Task 12', status : 'done', prio : 'low' },
            { id : 13, name : 'Task 13', status : 'done', prio : 'high' }
        ]},
        { id : 2, name : 'Project 2', children : [
            { id : 21, name : 'Task 21', status : 'wip', prio : 'high' },
        ]}
    ],

features : { treeGroup : { // Fields to build a new tree from levels : [ 'prio', 'status' ] } } });

// Resulting data [ { name : 'low', children : [ { name : 'done', children : [ { id : 12, name : 'Task 12', status : 'done', prio : 'low' } ]} ]}, { name : 'high', children : [ { name : 'done', children : [ { id : 13, name : 'Task 13', status : 'done', prio : 'high' } ]}, { name : 'wip', children : [ { id : 11, name : 'Task 11', status : 'wip', prio : 'high' }, { id : 21, name : 'Task 21', status : 'wip', prio : 'low' } ]} ]} ]

Generated parent records are indicated with generatedParent and key properties. The first one is set to true and the latter one has a value for the group the parent represents.

This feature does not work when the store is configured with lazyLoad.

Summaries

You can also show summaries in each group row, by configuring columns with sum.

new Grid({
    features : { treeGroup : true },
    columns : [
        {
            text  : 'Name',
            field : 'name',
            flex  : 3,
            type  : 'tree'
        },
        {
            type  : 'number',
            text  : 'Capacity',
            field : 'capacity',
            flex  : 1,
            sum   : 'add'
        },
        {
            type  : 'number',
            text  : 'Crew',
            field : 'crew',
            flex  : 1,
            sum   : 'add'
        }
    ]
});

Important information

Using the TreeGroup feature comes with some caveats:

  • Generated parents are read-only, they cannot be edited using the default UI.
  • Moving nodes manually in the tree is not supported while it is grouped. The linked records have their own parentId fields, not linked to the original records value.
  • The generated structure is not meant to be persisted.
Please note that this feature is not supported in vertical mode in Scheduler. If the Grid is stateful, the group configuration will be stored, but only string based group levels (e.g. ['city']).

This feature is disabled by default.

See also

  • Tree - Tree feature for hierarchical data
  • Group - Grouping feature for flat data
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • Specify as true to make generated parents start expanded.

  • True to hide grouped columns. Only supported when using String to define levels.

  • parentCls : Stringb-generated-parent

    CSS class to apply to the generated parents.

  • The number of milliseconds to wait after scheduleRefreshGroups call before actually refreshing groups. Each further scheduleRefreshGroups call during that timeout will restart the timer.

  • Internal listeners, that cannot be removed by the user.

  • The widget which this plugin is to attach to.

    Has a corresponding runtime client property.

  • Set to false to disable localization of this object.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isEvents : Booleantrue
    READONLY
    static
    ADVANCED
    Events
    Identifies an object as an instance of Events class, or subclass thereof.
  • isLocalizable : Booleantrue
    READONLY
    static
    ADVANCED
    Localizable
    Identifies an object as an instance of Localizable class, or subclass thereof.
  • isTreeGroup : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of TreeGroup class, or subclass thereof.
  • properties : Object
    internal
    static
    InstancePlugin

    A class property getter for the default values of internal properties for this class.

  • isGrouped : Boolean
    READONLY

    Indicates if the feature has applied grouping and the component uses a transformed version of the store.

  • originalStore : Store
    READONLY

    The original store used by the component before applying grouping. Use this to modify / load data while tree grouping is active.

  • emptyArray : Array
    internal
    READONLY
    InstancePlugin

    An empty array that can be used as a default value.

  • emptyObject : Object
    internal
    READONLY
    InstancePlugin

    An empty object that can be used as a default value.

  • isInstancePlugin : Booleantrue
    READONLY
    ADVANCED
    InstancePlugin
    Identifies an object as an instance of InstancePlugin class, or subclass thereof.
  • isTreeGroup : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of TreeGroup class, or subclass thereof.
  • config : Object
    READONLY
    ADVANCED
    InstancePlugin

    Returns a copy of the full configuration which was used to configure this object.

  • This property is set to true before the constructor returns.

  • isDestroying : Boolean
    READONLY
    ADVANCED
    InstancePlugin

    This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

  • client : Widget
    READONLY
    ADVANCED
    InstancePlugin

    The Widget which was passed into the constructor, which is the Widget we are providing extra services for.

    Has a corresponding client config.

  • Get the global LocaleHelper

  • Get the global LocaleManager

Functions

Functions are methods available for calling on the class
  • onClassMixedIn( )
    internal
    static
    InstancePlugin

    This optional class method is called when a class is mixed in using the mixin() method.

  • initClass( )
    static
    ADVANCED
    InstancePlugin

    Registers this class type with its Factory

  • Internal function used to hook destroy() calls when using thisObj

  • Internal function used restore hooked destroy() calls when using thisObj

  • doDestroy( )
    internal
    Events

    Auto detaches listeners registered from start, if set as detachable

  • once( )
    private
    Events

    Internal function used to run a callback function after an event is triggered

  • Removes all listeners registered to this object by the application.

  • This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.

  • refreshGroups( )
    private
    ON-OWNER
    NON-LAZY-LOAD

    Refreshes the store tree grouping by re-applying the current transformation.

    // Refresh groups
    grid.refreshGroups();
    

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

Type definitions

id: treeGroup

Source path

Grid/feature/TreeGroup.js

Demo

examples/tree-grouping

Contents