Customized hover in gantt chart

2 posts, 0 answers
  1. Ramu
    Ramu avatar
    3 posts
    Member since:
    Oct 2012

    Posted 14 Jun 2017 Link to this post

    Customized with new column and hide percentage column in hover of gantt chart and introduced new column 
  2. Peter Milchev
    Admin
    Peter Milchev avatar
    304 posts

    Posted 19 Jun 2017 Link to this post

    Hello Ramu,

    If you want to customize the tooltip, one option is to use the Tooltip template of the underlying Kendo UI Gantt.

    Another option is to disable the built-in template by setting ShowTooltip="false" create a custom one when hovering over an element with .rgtTask class. 

    <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
                        $get("startTime").innerHTML = task.get_start().format("MM/dd/yyyy HH:mm");
                        $get("endTime").innerHTML = task.get_end().format("MM/dd/yyyy HH:mm");
                        var percentage = task.get_percentComplete() * 100;
                        $get("percentageDiv").innerHTML = (100 - percentage) + "%";
                        tooltip.set_text($get("contentContainer").innerHTML);
                    
                        setTimeout(function () {
                            tooltip.show();
                        }, 100);
                    }
      
                });
                var gantt = $find("RadGantt1");
            }
      
            var $ = $telerik.$;
      
            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>

    If that is not the desired functionality, would you please provide more details and specific examples of what you are trying to achieve? 

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top