Customized hover in gantt chart

[Ramu]

Customized with new column and hide percentage column in hover of gantt chart and introduced new column 

[Peter Milchev]

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