Customize task color individually

12 posts, 0 answers
  1. Irman
    Irman avatar
    1 posts
    Member since:
    Oct 2014

    Posted 16 Oct 2014 Link to this post

    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.
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 20 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Jesus
    Jesus avatar
    2 posts
    Member since:
    Aug 2014

    Posted 22 Nov 2014 Link to this post

    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;
            }
  4. Jesus
    Jesus avatar
    2 posts
    Member since:
    Aug 2014

    Posted 24 Nov 2014 in reply to Jesus Link to this post

    Individualmente
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 27 Nov 2014 Link to this post

    Hi Jesus,

    Thank you for sharing this with the community.

    Regards,
    Hristo Valyavicharski
    Telerik
  6. Adnan
    Adnan avatar
    2 posts
    Member since:
    Dec 2014

    Posted 02 Dec 2014 in reply to Hristo Valyavicharski Link to this post

    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
  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Dec 2014 Link to this post

    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
  8. Elhanid
    Elhanid avatar
    5 posts
    Member since:
    Dec 2014

    Posted 01 Jan 2015 in reply to Jesus Link to this post

    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,
  9. Richard
    Richard avatar
    9 posts
    Member since:
    Nov 2010

    Posted 09 Jan 2015 in reply to Jesus Link to this post

    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...



  10. Eric
    Eric avatar
    1 posts
    Member since:
    Oct 2014

    Posted 11 Feb 2016 in reply to Jesus Link to this post

    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>

  11. michael
    michael avatar
    9 posts
    Member since:
    Apr 2016

    Posted 21 Jul in reply to Hristo Valyavicharski Link to this post

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

    Mike

  12. Peter Milchev
    Admin
    Peter Milchev avatar
    258 posts

    Posted 26 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top