v7.3.0
SupportExamplesFree Trial

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.taskStore points to the original store when this feature is enabled. To apply sorting or filtering programmatically, you should instead interact with the "display store" directly, using gantt.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.

No results

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 false to disable localization of this object.

  • 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
    TreeGroup

    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
  • 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.

  • 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

  • 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
  • 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
    TreeGroup

    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
id: treeGroup

Source path

Gantt/feature/TreeGroup.js

Contents