Customize task color individually

10 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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;
            }
  5. Jesus
    Jesus avatar
    2 posts
    Member since:
    Aug 2014

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

    Individualmente
  6. 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
  7. 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
  8. 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
  9. 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,
  10. 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...



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

    Posted 11 Feb 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>

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017