This is a migrated thread and some comments may be shown as answers.

Customising Task Appearance in Gantt

3 Answers 218 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Colin
Top achievements
Rank 1
Colin asked on 14 Nov 2016, 12:55 PM

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.

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 17 Nov 2016, 08:05 AM
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 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.
0
Colin
Top achievements
Rank 1
answered on 10 Apr 2017, 08:56 AM

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?

0
Colin
Top achievements
Rank 1
answered on 10 Apr 2017, 11:43 AM

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.

Tags
Gantt
Asked by
Colin
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Colin
Top achievements
Rank 1
Share this question
or