Refresh custom columns

Gantt
#1

We have created a custom task types (“Project” and “Task”) to separate the grouping of tasks from the task type “Resources assignment”. We are capturing duration and assigned hours, for the “ResourceTask” type, but not for “Projects” and “Tasks”.

In the grid, duration and assigned hours are summarized for “Project” and “Task”, see code snippet below. But we struggle to get the calculation updating when editing tasks/drag without complete refresh. Complete refresh takes time and ruins the current GANTT focus.

Any ideas how to keep the grid updated without full refresh?

{label: “Ass.”, name: “assignedHours”, width: 40, align: “center”, resize: false, template: function(task) {
if(task.hours != null) return (task.duration * parseFloat(task.hours));
if (task.type != gantt.config.types.resourceTask) {
let sumAssignedHours = 0;
gantt.eachTask(function (task) {
if (task.type == gantt.config.types.resourceTask) {
sumAssignedHours += (task.duration * task.hours);
};
}, task.id);
return sumAssignedHours

#2

Hello,
If you modify the task properties, you need to repaint the task to see the changes. It is not necessary to use the gantt.render() or gantt.refreshData() to see the changes. You only need to call the gantt.refreshTask(id) method after recalculating the assigned hours.

Here is an example of how it works:
http://snippet.dhtmlx.com/5/2cd60b805

#3

How could I update a custom column like this:

{
   name: "resource", label: "Resource", width: 130, align: "center", resize: true,
   template: function (task) {
           return "<button type='button' class='btn-sm btn-sm-gantt btn-outline-primary assigne_resource--gantt-btn gantt-resource-cell--" + task.id + "' task-id='" + task.id + "' title='" + task.assign_to.full_name + "' task_name='" + task.text + "'><i class='la la-user'></i> " + task.assign_to.acronym + "</button>"
   },
},

and on api call success, I am doing:

success: function(resp){
           let newTask = gantt.getTask(resp.task.id);
           newTask.resource = "<button type='button' class='btn-sm btn-sm-gantt btn-outline-primary assigne_resource--gantt-btn gantt-resource-cell--" + resp.task.id + "' task-id='" + resp.task.id + "' title='" + resp.task.assign_to.full_name + "' task_name='" + resp.task.text + "'><i class='la la-user'></i> " + resp.task.assign_to.acronym + "</button>"
           gantt.refreshTask(resp.task.id);
       },

However, it is not updating anything, neither showing any error.

#4

Hello,
If you use the template function in the column configuration, changing the task property that matches the column name won’t do anything. And it is expected behavior.
If you want to display different values in the template function, you need to use a different variable or modify the task property. Then you need to use that variable or property in the template function.

Here is an example:

{
   name: "resource", label: "Resource", width: 130, align: "center", resize: true,
   template: function (task) {
           const taskObject = task.respTask || task;
           return "<button type='button' class='btn-sm btn-sm-gantt btn-outline-primary assigne_resource--gantt-btn gantt-resource-cell--" + taskObject.id + "' task-id='" + taskObject.id + "' title='" + taskObject.assign_to.full_name + "' task_name='" + taskObject.text + "'><i class='la la-user'></i> " + taskObject.assign_to.acronym + "</button>"
   },
},

Here are examples in the snippet:
https://snippet.dhtmlx.com/u8t1r7kr
https://snippet.dhtmlx.com/q64f00wj