Hyperlink property on GANTT Task Item

10 posts, 1 answers
  1. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 09 Mar Link to this post

    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!

  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 10 Mar Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 13 Mar in reply to Bozhidar Link to this post

    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?

  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 14 Mar Link to this post

    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!
     
  6. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 14 Mar in reply to Bozhidar Link to this post

    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.

     

  7. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 15 Mar Link to this post

    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

  8. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 15 Mar Link to this post

    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!
     
  9. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 16 Mar in reply to Bozhidar Link to this post

    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!

  10. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 17 Mar Link to this post

    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!
     
  11. Toni
    Toni avatar
    8 posts
    Member since:
    Mar 2016

    Posted 17 Mar in reply to Dimitar Terziev Link to this post

    Hi Dimitar,

     

    many thanks for this snipped. It works for me!

Back to Top
Kendo UI is VS 2017 Ready