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.
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.
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
parentIdfields, not linked to the original records value. - The generated structure is not meant to be persisted.
This feature is disabled by default.
See also
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Specify as
trueto make generated parents start expanded. -
True to hide grouped columns. Only supported when using String to define levels.
-
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
falseto disable localization of this object.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Events class, or subclass thereof.
-
Identifies an object as an instance of Localizable class, or subclass thereof.
-
Identifies an object as an instance of TreeGroup class, or subclass thereof.
-
A class property getter for the default values of internal properties for this class.
-
Indicates if the feature has applied grouping and the component uses a transformed version of the store.
-
The original store used by the component before applying grouping. Use this to modify / load data while tree grouping is active.
-
An empty array that can be used as a default value.
-
An empty object that can be used as a default value.
-
Identifies an object as an instance of InstancePlugin class, or subclass thereof.
-
Identifies an object as an instance of TreeGroup class, or subclass thereof.
-
Returns a copy of the full configuration which was used to configure this object.
-
This property is set to
truebefore theconstructorreturns. -
This property is set to
trueon entry to the destroy method. It remains on the objects after returning fromdestroy(). If isDestroyed istrue, this property will also betrue, so there is no need to test for both (for example,comp.isDestroying || comp.isDestroyed). -
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-
This optional class method is called when a class is mixed in using the mixin() method.
-
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
-
Auto detaches listeners registered from start, if set as detachable
-
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.
-
Refreshes the store tree grouping by re-applying the current transformation.
// Refresh groups grid.refreshGroups();