PROJECT DESCRIPTION
This example demonstrates how to show a custom template when hovering a task.
The custom tooltip is achieved by disabling the built-in tooltips by setting the ShowTooltip property to false and creating custom tooltips on mouseover of the task. The task elements contain the
.rgtTask class which can be used as a selector to bind the mouseover event. The task element also has a
data-uid attribute which can be used to get the dataItem for the task.
<script type=
"text/javascript"
>
var
$ = $ || $telerik.$;
function
OnClientDataBound(sender, args) {
var
gantt = sender;
$(sender.get_element()).find(
".rgtTask"
).on(
"mouseover"
,
function
(e) {
e.stopPropagation();
var
$element = $(e.target);
if
(!$element.is(
".rgtTask"
)) {
$element = $element.parents(
".rgtTask"
).first();
}
var
task = getTaskByUid(gantt, $element.attr(
"data-uid"
));
var
tooltipManager = $find(
"<%= ToolTipMngr1.ClientID %>"
);
var
tooltip = tooltipManager.getToolTipByElement(task.get_element());
//Create a tooltip if no tooltip exists for such element
if
(!tooltip) {
tooltip = tooltipManager.createToolTip(task.get_element());
//use task
var
percentage = task.get_percentComplete() * 100;
$get(
"startTime"
).innerHTML = task.get_start().format(
"MM/dd/yyyy HH:mm"
);
$get(
"endTime"
).innerHTML = task.get_end().format(
"MM/dd/yyyy HH:mm"
);
$get(
"percentageDiv"
).innerHTML = (100 - percentage) +
"%"
;
tooltip.set_text($get(
"contentContainer"
).innerHTML);
setTimeout(
function
() {
tooltip.show();
}, 100);
}
});
}
function
getTaskByUid(gantt, uid) {
var
tasks = gantt.get_allTasks();
for
(
var
i = 0; i < tasks.length; i++) {
if
(tasks[i]._uid === uid) {
return
tasks[i];
break
;
}
}
return
null
;
}
</script>