New to Kendo UI for jQueryStart a free 30-day trial

Show Tooltip for Tasks in Gantt Treelist

Environment

ProductProgress® Kendo UI® Gantt for jQuery
Operating SystemAll
BrowserAll
Preferred LanguageJavaScript

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
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support