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

Hyperlink property on GANTT Task Item

9 Answers 186 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Toni
Top achievements
Rank 1
Toni asked on 09 Mar 2016, 09:30 AM

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!

9 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 10 Mar 2016, 08:17 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Toni
Top achievements
Rank 1
answered on 13 Mar 2016, 10:27 PM

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?

0
Bozhidar
Telerik team
answered on 14 Mar 2016, 07:41 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Toni
Top achievements
Rank 1
answered on 14 Mar 2016, 08:01 AM

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.

 

0
Toni
Top achievements
Rank 1
answered on 15 Mar 2016, 06:35 AM

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

0
Bozhidar
Telerik team
answered on 15 Mar 2016, 07:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Toni
Top achievements
Rank 1
answered on 16 Mar 2016, 11:42 AM

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!

0
Accepted
Dimitar Terziev
Telerik team
answered on 17 Mar 2016, 07:57 AM
Hi Toni,

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

Regards,
Dimitar Terziev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Toni
Top achievements
Rank 1
answered on 17 Mar 2016, 04:28 PM

Hi Dimitar,

 

many thanks for this snipped. It works for me!

Tags
Gantt
Asked by
Toni
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Toni
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or