Custom Task Tooltip

Thread is closed for posting
1 posts, 0 answers
  1. E2DE6E82-E2D9-4F0D-906D-3F1E2C32B9D6
    E2DE6E82-E2D9-4F0D-906D-3F1E2C32B9D6 avatar
    12 posts
    Member since:
    Jan 2017

    Posted 10 Aug 2017 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" OnClientDataBound="OnClientDataBound" ... >

    <%-- 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 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>


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.