Coloring Progress Bar in Gantt Chart

5 posts, 0 answers
  1. Rahadian
    Rahadian avatar
    1 posts
    Member since:
    Aug 2014

    Posted 25 Aug 2014 Link to this post

    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
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Aug 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Matthew
    Matthew avatar
    12 posts
    Member since:
    Jun 2015

    Posted 16 Jul 2015 in reply to Alex Gyoshev Link to this post

    Alex,

    Is there a property (similar to backgroundColor on your function example above) which can set the color of just the percentComplete portion of the task bar and not the background?

  5. Matthew
    Matthew avatar
    12 posts
    Member since:
    Jun 2015

    Posted 16 Jul 2015 in reply to Rahadian Link to this post

    Is there a similar property (like backgroundColor) that controls the color of the percentComplete portion of the task bar?
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 20 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready