Customising Task Appearance in Gantt

4 posts, 0 answers
  1. Colin
    Colin avatar
    5 posts
    Member since:
    Dec 2012

    Posted 14 Nov 2016 Link to this post

    I'm new to the Telerik suite and this control is my first real exposure.  I hope the other controls are better implemented than this one.

    I have just spent 3 days getting tasks to appear with different background colours.  Am I missing something?  I can't believe the hoops I've had to jump through to achieve this (custom task objects, custom task factories, custom task providers, client templates and I still had to finish it off with a jquery hack!).  Surely the basic appearance of a task item on the chart should be as simple as setting a few properties server side e.g. "task.BackColor=..." etc?

    No basic formatting, no basic client-side events such as chart_onload, item_selected, item_double_click.

    The documentation is less than helpful and all the examples I've looked at seem to assume I'm using windows entity framework (I'm not.)

    Are there plans to make this chart more customisable in a future release?

    If anyone found a more straightforward way to achieve this basic functionality I would be extremely grateful if they could share what they did.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    439 posts

    Posted 17 Nov 2016 Link to this post

    Hi Colin,

    The easiest way to customize Tasks is to use Client templates, as shown in our Demo. Apart from the Client template, you will have to define CustomTaskFields for the fields that you would like to pass from your DataSource to the template and which are not part of the default Task schema (for example the color field).

    Note that in the demo, the Gantt chart is configured to get data from a Web service and you will need a custom provider, custom task class, and custom task factory, as you did in your implementation.

    Concerning possible introduction of greater customization capabilities of the control, we do not have immediate plans to implement such. However, I would suggest you to log your ideas of what could be improved in the Gantt chart in our Feedback portal. Based on the support they receive from the community, we will decide whether to include them or not in our backlog.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  3. Colin
    Colin avatar
    5 posts
    Member since:
    Dec 2012

    Posted 10 Apr in reply to Veselin Tsvetanov Link to this post

    I am using the Client templates but the problem then is that I lose the Percentage complete functionality.  All I really want to do is modify a task's background colour based on a custom Status field and maintain the percent used functionality.

    Can anyone please advise how I can achieve this?

  4. Colin
    Colin avatar
    5 posts
    Member since:
    Dec 2012

    Posted 10 Apr Link to this post

    OK - I've got this working but it seems like a hack to me.  I didn't use a client template as then I lost the percentage complete functionality.  Instead I created a custom task with a taskBackColor field.  I then used jquery at page load to fudge over the top of the current task styles.  Here's my js:

     //Hack to colour the task items to match their statuses
                if ($(document).ready) {
                 
                    var gantt = $find("<%= radGantt.ClientID%>");
                    var tasks = gantt.get_allTasks();

                    for (var i = 0; i < tasks.length; i++) {
                        var tsk = tasks[i];
                        var tskDiv = $('div[data-uid="' + tsk._uid + '"]');
                        tskDiv.css("background-color", tsk._data.taskBackColor).css("border-color", "rgba(0, 0, 0, 0.2)");
                        tskDiv.find('.rgtTaskComplete').css("background-color", "rgba(0, 0, 0, 0.05)").css("background-image", "none").css("border-color", "rgba(0, 0, 0, 0.2)");

         //Hide the text
                        tskDiv.find('.rgtTaskTemplate').hide();
                    }
                }

    I'm not really happy with this solution but I can't see any other way of doing it.  It seems doing even the most basic of formatting on this control requires some major hacking.  This really needs addressing.

Back to Top