Gantt Chart and Kanban Task Board Integration

We are happy to announce a new example which integrates the Ext Gantt with the Task Board component. This blog […]

We strive to keep posts updated, but code samples may sometimes be outdated. Humans, see the Bryntum documentation; agents, https://mcp.bryntum.com for the latest info.

We are happy to announce a new example which integrates the Ext Gantt with the Task Board component. This blog post will give a brief description of the example and highlight some interesting parts of the code. Feel free to try the example out, you can find it here. To browse the source files, just click Details on the right.

Short description of the example

This example features Gantt tasks that have smaller tasks visualized in the Task Board. Each Gantt task can contain multiple Task Board tasks, shown as small colored thumbs inside the task bar:

Thumbs

Click on a thumb to highlight the corresponding Task Board task:

Or click on a Gantt task to filter the TaskBoard to only display related TaskBoard tasks:

Filter kanban

When the status of a Task Board task changes it is reflected immediately on the miniature. Dragging a Task Board task to Done also affects the Gantt task’s percentage field:

Percent done

Comments on the code

Below are some comments on the central parts of the code that makes the interaction possible. Task Board tasks are connected to Gantt tasks via a foreign key field on the model:

Ext.define('GanttTaskBoard.model.KanbanModel', {
    extend: 'Kanban.model.Task',

    // Add field to connect Kanban tasks to Gantt tasks
    fields: [
        {name: 'TaskId', type: 'int'}
    ]
});

The Task Board store handles getting related tasks:

Ext.define('GanttTaskBoard.store.KanbanStore', {
    extend  : 'Kanban.data.TaskStore',
    model   : 'GanttTaskBoard.model.KanbanModel',

    /**
     * Get all Kanban tasks that belongs to a specific Gantt task.
     * @param taskId Id of a Gantt task, matched to Kanban tasks field TaskId
     * @returns {*} Array of Kanban tasks
     */
    getKanbanTasksByTaskId: function (taskId) {
        return this.query('TaskId', taskId).items;
    }
});

Gantt task are given a shortcut to related Task Board tasks:

Ext.define('GanttTaskBoard.model.TaskModel', {
    extend : 'Gnt.model.Task',

    /**
     * Get related Kanban tasks (where KanbanTask.TaskId == Task.Id)
     * @returns {*} Array of related Kanban tasks
     */
    getKanbanTasks: function() {
        var me = this,
            kanbanStore = me.getTaskStore().kanbanStore;
        return kanbanStore.getKanbanTasksByTaskId(parseInt(this.getId(), 10));
    }
});

And when using custom data inside our Gantt task template, we also need to provide the relevant data to the template via the eventRenderer method. This is how the task miniatures are rendered:

Ext.define('GanttTaskBoard.view.Gantt', {
    extend    : 'Gnt.panel.Gantt',

    eventRenderer : function (taskRecord) {
        return {
            // Provide kanban tasks to the task body template
            kanbantasks : taskRecord.getKanbanTasks() || []
        };
    },

    // taskBody with an outer div (sch-gantt-task-inner) containing a progress bar and a div to hold kanban 
    // miniatures (.sch-gantt-kanban-bar)
    taskBodyTemplate : '<div style="width:{progressBarWidth}px;{progressBarStyle}"></div>' +
    '<div>' +
        // template used to render kanban tasks as miniatures into gantt tasks
        '<tpl for="kanbantasks">' +
                '<div data-qtip="{data.Name}" data-kanban-id="{data.Id}"></div>' +
        '</tpl>' +
    '</div>'
});