New to Kendo UI for jQuery? Download free 30-day trial

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


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


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


  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>
            <div style="background-color: lightblue;"><strong>Type 2 tooltip template</strong></div>
            <div>#: task.title #</div>

            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")
In this article