Custom Task Tooltip

1 posts, 0 answers
  1. Peter
    Peter avatar
    7 posts
    Member since:
    Jan 2017

    Posted 10 Aug Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2017 R2 SP2

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadGantt, RadToolTip, .NET 4.0/4.5 C#

    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.

    <telerik:RadGantt ID="RadGantt1" ShowTooltip="false" ... >
    <%-- This is the template for the tooltip --%>
    <div style="display: none;">
        <div id="contentContainer">
            <div class="appointment-tooltip">
                <p>
                    Starts on: <span id="startTime">
                        <!-- -->
                    </span>
                    <br />
                    Ends on: <span id="endTime">
                        <!-- -->
                    </span>
                </p>
                <hr />
                Percentage TO BE Completed:
                        <div id="percentageDiv">
                        </div>
            </div>
        </div>
    </div>

    <telerik:RadToolTipManager runat="server" ID="ToolTipMngr1">
    </telerik:RadToolTipManager>
    <script type="text/javascript">
        var $ = $telerik.$;
     
        function pageLoad() {
            $(".rgtTask").on("mouseover", function (e) {
                e.stopPropagation();
                var $element = $(e.target);
                if (!$element.is(".rgtTask")) {
                    $element = $element.parents(".rgtTask").first();
                }
     
                var task = getTaskByUid($element.attr("data-uid"));
                var tooltipManager = $find("ToolTipMngr1");
                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(uid) {
            var gantt = $find("RadGantt1");
            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>
Back to Top