Customize task color individually

[Irman]

Hi, I've downloaded Telerik UI for ASP.NET AJAX and interested in Gantt chart control (Telerik_UI_for_ASP.NET_AJAX_Setup_2014_2_724.zip). I was wondering how to change task color individually based on status (finished = green, on progress = blue, overdue = red). Is it possible with the current beta version? When is the final version will be released? Thank you.

[Hristo Valyavicharski]

Hi Irman,

At the moment this is not possible with the current version, however we are going to add this functionality in further versions.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Jesus]

De hecho encontre una manera de hacerlo mediante javascript el cual detallo a continuacion:
Se necesitara agregar los siguientes estilos y scripts a la pagina que contenga el radgantt. 
Estilos:
.clsOrangeSemaphore
    {
        background: #ffc578; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
    }
    
    .clsRedSemaphore
    {
        background: #febbbb; /* Old browsers */
        background: -moz-linear-gradient(top,  #febbbb 0%, #fe9090 45%, #ff5c5c 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febbbb), color-stop(45%,#fe9090), color-stop(100%,#ff5c5c)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #febbbb 0%,#fe9090 45%,#ff5c5c 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=0 ); /* IE6-9 */
    }
    
    .clsGreenSemaphore
    {
        background: #b4e391; /* Old browsers */
        background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
    }
    
    .clsBookMark
    {
    }
Scripts
function AddBookMark() {
            $('.rgtTask.rgtTaskSingle').each(function () {
                $(this).addClass("clsBookMark");
            });
        }

        function Semaphore() {
            var $ = $telerik.$;
            var gantt = $find("<%=RadGantt1.ClientID%>");
            var tasks = gantt.get_allTasks();
            var task;
            var uid;
            var cls;
            for (var i = 0; i < tasks.length; i++) {
                task = tasks[i];
                uid = tasks[i]._uid;
                cls = GetClsSemaphore(uid);
                    $('.rgtTask.rgtTaskSingle.clsBookMark').each(function () {
                        if ($(this).attr('data-uid') == uid) {
                            $(this).find('.rgtTaskContent').addClass(cls);
                        }
                    });
            }
        }

        function GetClsSemaphore(uid) {
            var resul = '';
            $(".rgtTreelistContent table tr").each(function () {
                if ($(this).attr('data-uid') == uid) {
                    resul = $(this).find("td").eq(5).text();
                    return false;
                }
            });
            
//            if (id == '107') {
//                resul = 'clsOrangeSemaphore';
//            }
            return resul;
        }

[Jesus]

Individualmente

[Hristo Valyavicharski]

Hi Jesus,

Thank you for sharing this with the community.

Regards,
Hristo Valyavicharski
Telerik

[Adnan]

Can you please tell for which version of telerik we have option to add colors for each task. I am using ajax cleint side call using service in asp.net webforms

[Hristo Valyavicharski]

Adnan.

At the moment you can style everything with css and jQuery. For the new features that are about to be implemented keep an eye out the Roadmap. 

Regards,
Hristo Valyavicharski
Telerik

[Elhanid]

Dear Jesus,

Could you please tell me how can I bind my tasks when I select an project item as your example showed in you printscreen ?

I have a similar template example in attachement.

Many Thanks,

[Richard]

Hola Jesús, 

Gracias por haber compartido.  

Usé tu código, pero estoy teniendo problemas.  Cuando hago click en una tarea (padre), los elementos en esa estructura pierden el color que y vuelven a su estado original. No se si podrías sugerirme una solución, no conozco tanto javascript/jquery por lo que me resulta mas difícil encontrar una solución. 

en adjunto algunas imágenes de como se comporta el gantt.

Gracias...

[Eric]

Hi JEsus, i've just test your solution but it's not working.

My Page :

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .clsOrangeSemaphore
    {
        background: #ffc578; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
    }
            .clsBookMark
    {
    }
    </style>
</head>
<body onload="Semaphore();">
    <script type="text/javascript">

        function AddBookMark() {
            $('.rgtTask.rgtTaskSingle').each(function () {
                $(this).addClass("clsBookMark");
            });
        }

        function Semaphore() {
            var $ = $telerik.$;
            var gantt = $find("<%=rgTelerik.ClientID%>");
            var tasks = gantt.get_allTasks();
            var task;
            var uid;
            var cls;
            for (var i = 0; i < tasks.length; i++) {
                task = tasks[i];
                uid = tasks[i]._uid;
                cls = GetClsSemaphore(uid);
                alert(task.get_id());
                $('.rgtTask.rgtTaskSingle.clsBookMark').each(function () {
                    if ($(this).attr('data-uid') == uid) {
                        $(this).find('.rgtTaskContent').addClass(cls);
                    }
                });
            }
        }

        function GetClsSemaphore(uid) {
            var resul = '';
            $(".rgtTreelistContent table tr").each(function () {
                if ($(this).attr('data-uid') == uid) {
                    resul = $(this).find("td").eq(5).text();
                    return false;
                }
            });

            //            if (id == '107') {
            //                resul = 'clsOrangeSemaphore';
            //            }
            return resul;
        }
        </script>

[michael]

Hristo, This goes way back. Did you guys ever add the ability to set a task color on RadGantt?

Mike

[Peter Milchev]

Hello Michael,

The colorization of the task can be achieved by using Client-side templates or using the ClientDataBound event to customize the task elements using JavaScript and CSS, as the colorizations is not a built-in functionality. 

Please find attached a sample project implementing the second approach.

function OnClientDataBound(sender, args) {

    var gantt = sender._widget;

    gantt.element.find(".rgtTask ").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";
        }
        this.style.backgroundImage = 'none';
    });
}

Regards,
Peter Milchev
Progress Telerik