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 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:
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:
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:
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>' });
Additional resources
This sample can be found in the Gantt Pro edition and you can also run it online.
- Learn more about the Gantt chart: /gantt/
- Learn more about the Task Board: /taskboard/
- Try the live demo