Not displaying progress in task bar

Gantt
#1

Hi Support,

I need to change task progress using task bar. for that I added below code

gantt.config.show_progress = true;
gantt.templates.progress_text = function (start: Date, end: Date, task: GanttTaskInfo) {
return “<span style=‘text-align:left;’>” + Math.round(task.progress) + “% </span>”;
};

but its displaying like this.

image
image1491×326 30.7 KB

its not displaying progress percent in task bar and not allow to change it. cant you pls check it there any missing code,

Thanks.
Rasagb

#2

Hello,
If I understood your question correctly, you want to display the task with zero progress without any filling. If it so, you need to remove padding-left CSS rule from .gantt_task_progress class.
Also, if you want to display a zero percentage progress in the task bar, you can set overflow: visible !important; CSS rule to the .gantt_task_progress class.
Please check the following snippet:
https://snippet.dhtmlx.com/tk66b6pd

#3

Hi,

I my case, please refer the screen shot. In screenshot “New 1.1” task is 20% completed. but in taskbar its fully
filled(not only 20%). this is my problem.

Thanks.
Rasagb

#4

Hello,
Sorry for misunderstanding.
Gantt only accepts progress values between 0 and 1. It means you need to convert your progress data in Gantt. To get progress as a percentage in the task bar, its value should be multiplied by 100.
Please check the following snippet:
https://snippet.dhtmlx.com/w0xvs2kq
Note, that parsed progress data is in the range from 0 to 1.

#5

HI,
Thanks for the Quick reply. But in my case change progress to 0-1 value impact on many arears in Gantt. Is there a way to bind different property to Task bar,

Thanks.
Rasagb

#6

Hello,
You can use a custom task property to store converted progress of the task.
For example:

"custom_progress" : task.progress/100

Also, you can use onTaskLoading handler to change progress value
with the help of eachTask method:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskloading_event.html ;
https://docs.dhtmlx.com/gantt/api__gantt_eachtask.html ;
Like this:

gantt.eachTask(function(task){
        task.progress = task.progress / 100;
})

But when you will save the progress to the database, the value will need to be changed again.
Please check the example with onParse event when the tasks are parsed from the object:
https://snippet.dhtmlx.com/hrhixr74