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>
In this article
Not finding the help you need? Improve this article