TreeGroup

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:

Tree group

//<code-header>
fiddle.title = 'Tree group';
//</code-header>
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.