TreeGroup
Feature
Extends Grid's TreeGroup (follow the link for more info) feature to enable using it with Gantt. Allows generating a new task tree where parents are determined by the values of specified task fields/functions:
const gantt = new Gantt({ appendTo : targetElement, // makes the Gantt chart as tall as it needs to be to fit all rows autoHeight : true, columns : [ { type : 'name', field : 'name', text : 'Name' } ], features : { treeGroup : { levels : ['prio'], parentRenderer({ value, row, cellElement, grid }) { return value; } } }, startDate : new Date(2022, 1, 4), endDate : new Date(2022, 1, 11), project : { taskStore : { fields : ['prio', 'category'] }, tasks : [ { id : 1, name : 'Project A', startDate : '2022-02-01', expanded : true, children : [ { id : 11, name : 'Task 1', startDate : '2022-02-01', duration : 5, prio : 'High', category : 'In house' }, { id : 12, name : 'Task 2', startDate : '2022-02-01', duration : 5, prio : 'Low', category : 'In house' }, { id : 13, name : 'Task 3', startDate : '2022-02-01', duration : 4, prio : 'High', category : 'In house' }, { id : 14, name : 'Task 4', startDate : '2022-02-01', duration : 5, prio : 'High', category : 'External' }, { id : 15, name : 'Task 5', startDate : '2022-02-01', duration : 5, prio : 'Low', category : 'External' } ] } ], dependencies : [ { id : 1, fromTask : 11, toTask : 12 }, { id : 2, fromTask : 13, toTask : 14 } ] }, tbar : [ { type : 'buttongroup', toggleGroup : true, rendition : 'padded', items : [ { text : 'Prio', pressed : true, onToggle({ pressed }) { pressed && gantt.group(['prio']); } }, { text : 'Category', onToggle({ pressed }) { pressed && gantt.group(['category']); } }, { text : 'Prio + Category', onToggle({ pressed }) { pressed && gantt.group(['prio', 'category']); } }, { text : 'none', onToggle({ pressed }) { pressed && gantt.clearGroups(); } } ] } ] }); Important information
Using the TreeGroup feature comes with some caveats:
- Grouping replaces the store Gantt uses to display tasks with a temporary "display store". The original task store is left intact, when grouping stops Gantt will revert to using it to display tasks.
gantt.taskStorepoints to the original store when this feature is enabled. To apply sorting or filtering programmatically, you should instead interact with the "display store" directly, usinggantt.store.- Generated parents are read-only, they cannot be edited using the default UI.
- Leaves in the new tree are still editable as usual, and any changes to them survives the grouping operation.
- Moving tasks in the tree (rearranging rows) is not supported while it is grouped.
This feature is disabled by default.
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
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. -
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.
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.
-
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
-
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.
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();