Edit this page

Show Different Gantt Task Tooltip Based on a Field in the DataSource

Environment

Product Progress Kendo UI Gantt
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I display a different tooltip for Gantt tasks that have different custom field values?

Solution

  1. Set the tooltip.template configuration option of the Gantt.
  2. In the template, access the custom field value of the task that the tooltip will depend on.
  3. Based on the custom field value, conditionally load different template content.
    <div id="gantt"></div>

    <script type="text/x-kendo-template" id="myTemplate">
        #if(task.customField == "type1"){#
            <div style="background-color: lightgreen;">Type 1 tooltip template</div>
            <div>#: task.title #</div>
        #}else{#
            <div style="background-color: lightblue;"><strong>Type 2 tooltip template</strong></div>
            <div>#: task.title #</div>
        #}#
    </script>

    <script>
        $("#gantt").kendoGantt({
            tooltip: {
                visible: true,
                template: kendo.template($("#myTemplate").html())
            },
            dataSource: [
                {
                id: 1,
                orderId: 0,
                parentId: null,
                title: "Task1",
                customField: "type1",
                start: new Date("2014/6/17 9:00"),
                end: new Date("2014/6/17 11:00")
                },
                {
                id: 2,
                orderId: 1,
                parentId: null,
                customField: "type2",
                title: "Task2",
                start: new Date("2014/6/17 11:00"),
                end: new Date("2014/6/17 12:00")
                }
            ]
        });
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy