Coloring Progress Bar in Gantt Chart

[Rahadian]

Hey admin,
Can i coloring Progress bar?
if progress under 50%, it will be RED.
if it between 50 and 70, it will be Yellow.
and if it 100%, it will be Green.

Thanks for your attention.
:)

regards, 
Rahadian

[Alex Gyoshev]

Hello Rahadian,

While there is no out-of-the-box property that enables this, you can bind an event handler to the dataBound event and modify the rendered tasks via jQuery.

    dataBound: function() {
        var gantt = this;
              
        gantt.element.find(".k-task").each(function(e) {
            var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
                
            // colorize task per business requirements
            if (dataItem.percentComplete < .5) {
                this.style.backgroundColor = "#f99";
            } else {
                this.style.backgroundColor = "#9f9";
            }
        });
    }

Here is a Dojo snippet that shows this.

Regards,
Alex Gyoshev
Telerik

 

 

[Matthew]

Is there a similar property (like backgroundColor) that controls the color of the percentComplete portion of the task bar?

[Dimitar Terziev]

Hi,

Here is a dojo snippet showing how to colorize the percentComplete portion of the gantt's task.

Regards,
Dimitar Terziev
Telerik