Hyperlink property on GANTT Task Item

[Toni]

Hi Telerik,

 

I would like to set a hyperlink for KENDO GANTT Task, so when the user click on a KENDO GANTT Task bar the browser opens for example www.google.com or www.telerik.com. 

I don't find any property, which I can use to do this.

My data ist in a JSON string.

Greetings and Thanks

Toni!

[Bozhidar]

Hello,

You can check out the templates demo for the gantt widget:
http://demos.telerik.com/kendo-ui/gantt/task-template

You can modify the demo to create a template which has a hyperlink in it.

Regards,
Bozhidar
Telerik

 

 

[Toni]

Hi,

unfortunately I can't get the following tooltip-template working on my machine. 

http://dojo.telerik.com/oMigA/6

On my machine, every gantt-task item shows only the title of the gantt-task (for example the output for a gantt-task is  <div class="k-task-template">Control</div>) , although the title is not configured in the task-template.

I suspect that anything is wrong in my task-template, but what?

[Bozhidar]

Hello,

I tested the provided dojo and it worked as expected on my end. I'm not quite sure what is the expected behavior you are looking for, but if you want to also modify the task tooltip, you have to use the following setting:
http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-tooltip


Regards,
Bozhidar
Telerik

 

 

[Toni]

Thank you Bozhidar,

 

what I mean is, that on my machine the same task-template code do not create hyperlink on GANTT task item.

   

01.function drawKENDOGantt() {
02.
03.        kgantt = $('#KENDOgantt').kendoGantt({
04.            taskTemplate: $("#task-template").html(),
05.            dataSource: cpmDataSource,
06.            dependencies: dependenciesDataSource,
07.            columns: [
08.                { field: 'title', title: 'Title', sortable: false, resizable: true, width: 300 },
09.                { field: 'contentType', title: 'Projekttyp', sortable: false, resizable: true, width: 100 },
10.                { field: 'start', title: 'Start', sortable: false, format: "{0:dd.MM.yyyy}" },
11.                { field: 'end', title: 'Ende', sortable: false, format: "{0:dd.MM.yyyy}" },
12.                { field: 'percentComplete', title: 'Fertigstellungsgrad', sortable: false },
13.            ],
14.            showWorkHours: false,
15.            showWorkDays: false,
16.            editable: false,
17.            dataBound: function () {
18.                var gantt = this;
19.                //k-task-summary-complete
20.                    gantt.element.find(".k-task").each(function (e) {
21.                        var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
22.                        this.style.backgroundColor = dataItem.color;
23.                    });
24.
25.
26.
27.                },
28.        tooltip: {
29.            visible: false,
30.            template: "Name: #= task.title # ,  Start: #= task.startGantt #, Ende: #= task.endGantt #,  Status: #= task.status #, Planning GANTT: #= task.url2GANTT #",
31.        },
32.        views: [
33.                        { type: "day", title: "Tag" },
34.                        { type: "week", title: "Woche" },
35.                        {type: "month", title: "Monat", selected: true}
36.        ]
37.        });
38.    }

I attach a screenshot from the HTML output for gantt-task.

 

[Toni]

Hi,

I could partially fixed the problem. It was an old kendo.all.min.js version.

But yet when I set the task-template this way, 

taskTemplate: '<div> <a href="\\#= task.url2GANTT \\#">eeee</a></div>'

the created shortcut is not correct, while the property value of  task.url2GANTT is not evaluated : 

 

ProjectCockpit/AllItems.aspx?#=task.url2GANTT

[Bozhidar]

Hi,

Inside the context of the template you have access to the task properties directly, and you don't have to write task.url2GANTT. If the url2GANTT property is present in each task, the following template should be ok:

taskTemplate: '<div> <a href="\\#= url2GANTT \\#">eeee</a></div>'

Regards,
Bozhidar
Telerik

 

 

[Toni]

Hi Bozhidar,

the code 

taskTemplate: '<div> <a href="\\#= url2GANTT \\#">eeee</a></div>',

 

produced the following html:

<div class="k-task-template"><div> <a href="#= url2GANTT #">eeee</a></div></div>

 

Could you help me with the template syntax?

Also I would like to use this template with the hyperlink in a gantt grid title column. 

 

Many many thanks!

[Dimitar Terziev]

Hi Toni,

Here is a dojo snippet showing how to embed a hyperlink in the title column of the gantt.

Regards,
Dimitar Terziev
Telerik

 

 

[Toni]

Hi Dimitar,

 

many thanks for this snipped. It works for me!