This is a migrated thread and some comments may be shown as answers.
Coloring Progress Bar in Gantt Chart
3 Answers 81 Views
This is a migrated thread and some comments may be shown as answers.
Rahadian
Top achievements
Rank 1
Rahadian asked on 25 Aug 2014, 07:46 AM
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

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Aug 2014, 01:39 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matthew
Top achievements
Rank 1
answered on 16 Jul 2015, 08:11 PM
Is there a similar property (like backgroundColor) that controls the color of the percentComplete portion of the task bar?
0
Dimitar Terziev
Telerik team
answered on 20 Jul 2015, 06:06 AM
Hi,

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

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Gantt
Asked by
Rahadian
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Matthew
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or