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

Show Tooltip for Tasks in Gantt Treelist

Environment

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

Description

How can I show a tooltip with the task data when I hover a task in the treelist of the Gantt?

Solution

  1. Set the filter configuration option of the Kendo UI Tooltip. As a result, the widget will be displayed when a row from the Gantt treelist is hovered.
  2. In the content option of the Tooltip, pass the hovered task data as its content.

For the full implementation of the approach, refer to this Dojo example.

    <script>
        $("#target").kendoTooltip({
            filter: ".k-gantt-treelist .k-grid-content tr",
            content: function(e) {
                // the element for which the tooltip is shown
                var target = e.target;
                var gantt = $("#gantt").data("kendoGantt");
                var task = gantt.dataItem(target);

                var title = task.title;
                var start = task.start;
                var end = task.end;

                // pass the task data as content for the Tooltip
                return "<strong>" + title + "</strong></br><p>Start: " + kendo.toString(start, "HH:mm ddd, MMM d") + "</p><p>End: " + kendo.toString(end, "HH:mm ddd, MMM d") + "</p>"
            },
            width: 200,
            height: 100,
            position: "bottom"
        });
    </script>
In this article