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

Environment

Product	Progress® Kendo UI® Gantt for jQuery
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>