This is a migrated thread and some comments may be shown as answers.

Customized hover in gantt chart

1 Answer 77 Views
This is a migrated thread and some comments may be shown as answers.
Ramu
Top achievements
Rank 1
Ramu asked on 14 Jun 2017, 08:29 AM
Customized with new column and hide percentage column in hover of gantt chart and introduced new column 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 19 Jun 2017, 09:50 AM
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.
Tags
Gantt
Asked by
Ramu
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or