Problem with RadTooltip position when scroll down the page

11 posts, 0 answers
  1. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 08 Dec 2010 Link to this post

    Hello,

    I have a problem with the tooltip positioning with some elements on my page.  I am using the TooltipManager and geting tooltip using javacript.  It is working fine with the position untill I scroll down the page.After scoll down it is showing tooltip uper side of the element.  Here is my sample code:  
    <telerik:RadToolTipManager runat="server" ID="RadTaskToolTipMgr" OffsetY="-3" Width="280" Height="80" Position="BottomCenter" RelativeTo="Element" Animation="None" HideEvent="LeaveToolTip" Text="Loading..." ShowEvent="OnClick" />

    <script type="text/javascript">
    function
    GetTootltip(element, Task_id) {
    var tooltipManager = $find("<%= RadTaskToolTipMgr.ClientID %>");
    if (!tooltipManager) return;
    var tooltip = tooltipManager.getToolTipByElement(element);
    if (!tooltip) {
    tooltip = tooltipManager.createToolTip(element);
    $.ajax({
    type:
    "POST",
    url:
    "Get-Members.aspx",
    data:
    "Id=" + Task_id + "&For=Task",
    success:
    function(msg) { if (msg == "1") {
    window.location =
    "../login.aspx";
    }
    else
        tooltip.set_text(msg);
        element.onclick =
    null
        element.onmouseover =
    null;
    tooltip.show();
    }
    }
    });
    }
    else {
    element.onclick =
    null;
    element.onmouseover =
    null;
    tooltip.show();
    }
    return false;
    }
    </script>
  2. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 09 Dec 2010 Link to this post

     

    Hello,
    After setting the targetControl the issue is solved in IE but still getting the issue in Firefox.
    How can I set position for both IE and Forefox?
     Here is my sample code: 

    var
    tooltipManager = $find("<%= RadTaskToolTipMgr.ClientID %>");
    if (!tooltipManager) return;
    var tooltip = tooltipManager.getToolTipByElement(element);
    if (!tooltip) {
    tooltip = tooltipManager.createToolTip(element);
    tooltip.set_targetControl(element);
    ..........................................
    .....................

    Thank you,
    Alex

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Dec 2010 Link to this post

    Hi Alex,

     I am afraid that the provided code is not enough to locate the problem. That is why I suggest to try ti reproduce the problem in one of our demos. e.g the configurator demo below:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx

    or another one which is closest to your setup. In case you succeed, please send me very detailed reproduction steps and explanations along with some screenshots and I will do my best to help.

    If you cannot replicate the issue on our demos, please prepare a fully runnable reproduction page which can be run without modifications again with instructions and screenshots and once we are able to observe the issue, we will be able to provide more specific suggestions.

    All the best,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 13 Dec 2010 Link to this post

    Hi Svetlina,
    I am using the concept of the following demo:

    http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx

    In my code I am calling javascript method on OnClientAppointmentClick of RadSchedular to generate tooltip dynamically.Here is my sample code:  
    <telerik:RadScheduler runat="server" EnableViewState="false" ID="RadScheduler1" ShowFullTime="true" Width="100%" AllowEdit="false" TimeZoneOffset="00:00:00" OverflowBehavior="Expand" ShowViewTabs="false" ShowNavigationPane="true"  EnableRecurrenceSupport="true" OnClientAppointmentContextMenu="appointmentContextMenu" DataSubjectField="Subject" OnClientTimeSlotContextMenu="timeSlotContextMenu" EnableEmbeddedSkins="true" OnClientAppointmentClick="ShowToolTipForCalendar" OnClientAppointmentDoubleClick="OnClientAppointmentDoubleClick"  DisplayDeleteConfirmation="false" MonthView-VisibleAppointmentsPerDay="5" AllowDelete="false" AllowInsert="false" NumberOfHoveredRows="1">
    <TimelineView UserSelectable="true" />
    <AppointmentTemplate><p title="<%#Eval("appointSub")%>"><%#Eval("appointSub") & " " & CType(Eval("StartTime"), Date).ToShortTimeString%> </p> </AppointmentTemplate> </telerik:RadScheduler>

     

    <telerik:RadToolTipManager ID="RadToolTipManager1" Width="280" Height="80" ShowEvent="OnClick" ShowCallout="false" Position="BottomCenter" RelativeTo="Element" HideEvent="LeaveToolTip" Animation="None" runat="server" Text="Loading..." > </telerik:RadToolTipManager>
    and using follwing javascript function :

    function ShowToolTipForCalendar(sender, eventArgs) {
            var element = eventArgs.get_appointment().get_element();
            var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
           
            //If the user hovers the image before the page has loaded, there is no manager created
            if (!tooltipManager) return;

     

            //Find the tooltip for this element if it has been created
            var tooltip = tooltipManager.getToolTipByElement(element);

            //Create a tooltip if no tooltip exists for such element
            if (!tooltip) {
                tooltip = tooltipManager.createToolTip(element);
                tooltip.set_targetControl(element);
                var ActID;
                var apt = eventArgs.get_appointment();
                //  apt.get_id() returns a number, converting to a string for future use.
                var strID = apt.get_id() + "";
                 if (strID.indexOf("_") > -1) {
                    ActID = strID.substring(0, strID.indexOf("_"));
                }
                else {
                    ActID = strID;
                }
                $.ajax({
                    type: "POST",
                    url: "Get-Members.aspx",
                    data: "Id=" + ActID ,
                    success: function(msg) {
                                     tooltip.set_text(msg);
                            element.onclick = null;
                            element.onmouseover = null;
                            tooltip.show();
                      }
                });
           }
            else {
                element.onclick = null;
                element.onmouseover = null;
                tooltip.show();
            }
            return false;
        }

    This is working fine in IE browser.But in Mozilla FireFox when scrolling the page and clicking on any apointment in the scheduler the new generated tooltip position going down.Without scrolling the page working fine.
    Please guide me how can I resolve the issue.
    Thank you,
    Alex.

     

  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Dec 2010 Link to this post

    Hello Alex,

    Since the code you provide is not runnable, I used it in one of our online demos but unfortunately to no avail - I was not abel to reproduce difference in the show position under FF before and after the page is scrolled. That is why I attached my test demo for your reference, please :

    1) If you can reproduce the issue with this very same code, provide a video capture of the reproduction steps

    2) If modifications need to be applied to see the issue, share full source code of the modified demo (make sure it is still fully runnable after modifications) and provide a video capture of the problem.

    Once I am able to reproduce, examine and debug the problem on my side, I will do my best to help.

    Kind regards,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 17 Dec 2010 Link to this post

    Hi Svetlina,
    I have implemented the demo code provided by you and replace some text in tooltip for testing.I got the same issue in mozila firefox and working fine in IE.
    I have attached the demo images. You can see in demo1 image without scrolling the schedular content, the tooltip posion working fine.But when scrolling the content, tooltip position goes down.
    Here is my sample code:

    <%

    @ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Scheduler.BindToList.DefaultVB" %>
    <%
    @ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head runat="server">
    <
    title>Test</title></head>
    <
    body class="BODY">
    <form id="Form1" method="post" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <div style="height: 200px;"></div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadScheduler1">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <div class="bigModule">
    <div class="bigModuleBottom">
    In addition to using declarative data sources and custom providers <b>RadScheduler</b> can also be bound to both generic and non-generic collections. <br />This allows you to directly use your business objects as a data source.
    </div>
    </div>
    <div class="exampleContainer">
    <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" DayStartTime="08:00:00" DayEndTime="18:00:00" TimeZoneOffset="03:00:00" OnAppointmentInsert="RadScheduler1_AppointmentInsert" OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" OnAppointmentDelete="RadScheduler1_AppointmentDelete" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule" OnClientAppointmentClick="ShowToolTipForCalendar" DataRecurrenceParentKeyField="RecurrenceParentId">
    <AdvancedForm Modal="true" />
    <TimelineView UserSelectable="false" />
    <%--<TimeSlotContextMenuSettings EnableDefault="true" />
    <AppointmentContextMenuSettings EnableDefault="true" />--
    %>
    </telerik:RadScheduler>
    </div>
    <div style="height: 1000px;"></div>
    <telerik:RadToolTipManager ID="RadToolTipManager1" Width="280" Height="80" ShowEvent="OnClick" ShowCallout="false" Position="BottomCenter" RelativeTo="Element" HideEvent="LeaveToolTip" Animation="None" runat="server" Text="Loading..."></telerik:RadToolTipManager>
    <telerik:RadCodeBlock ID="block" runat="server">
    <script type="text/javascript">
    function ShowToolTipForCalendar(sender, eventArgs)
    {
    var element = eventArgs.get_appointment().get_element();
    var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
    //If the user hovers the image before the page has loaded, there is no manager created
    if (!tooltipManager) return;
    //Find the tooltip for this element if it has been created
    var tooltip = tooltipManager.getToolTipByElement(element);
    //Create a tooltip if no tooltip exists for such element
    if (!tooltip)
    {
    tooltip = tooltipManager.createToolTip(element);
    tooltip.set_targetControl(element);
    // var ActID;
    // var apt = eventArgs.get_appointment();
    // // apt.get_id() returns a number, converting to a string for future use.
    // var strID = apt.get_id() + "";
    // if (strID.indexOf("_") > -1)
    // {
    // ActID = strID.substring(0, strID.indexOf("_"));
    // }
    // else
    // {
    // ActID = strID;

     

    // }
    // $telerik.$.ajax({
    // type: "POST",
    // url: "Get-Members.aspx",
    // data: "Id=" + ActID,
    // success: function (msg)
    // {

     

    tooltip.set_text("test<br/>test<br/>test<br/>test<br/>test<br/>");
    element.onclick =
    null;
    element.onmouseover =
    null;
    tooltip.show();
    // }
    // });
    }
    else
    {
    element.onclick =
    null;
    element.onmouseover =
    null;
    tooltip.show();
    }
    return false;
    }
    </script>
    </telerik:RadCodeBlock>
    </form>
    </
    body>
    </
    html>
    Thank you,
    Alex

     

  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Dec 2010 Link to this post

    Hi Alex,

    I replaced the page code with the new source and tested again under FF and IE but unfortunately to no avail. The only scenario in which I was able to reproduce the problem is when the tooltip is already shown and the scheduler is then scrolled, but this is expected and not what you report as far as I understand. Would you please examine the video capture I prepared for your reference and let me know in case I am doing something wrong?

     http://screencast.com/t/l4V92neF5p

    It will be best if you can also make a video of the problem reproduced with the very same code.

    All the best,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  9. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 23 Dec 2010 Link to this post

    Hi Svetlina ,
    Thanks for video capture.
    I checked the video and it's working perfectly in your video in both IE and Mozila.And you got exactly what I want.
    One thing I notice and confuse about RadWindow.js.
    Please let me know more about RadWindow.js.
    I also tried by including RadWindow.js in my demo page and got the same problem.
    I checked that my RadWindow.js code  and fount that it is different from which I have seen in the video provided by you.
    Is it necessary to include RadWindow.js in the page? Or the old version of RadWindow.js causing the issue?

    Thanks,
    Alex
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Dec 2010 Link to this post

    Hello Alex,

     Please, accept my sincere apologies for sending you a confusing video capture! The project with the RadWindow.js is actually in another instance of Visual Studio, which I had opened and minimized before showing your other project in the other instance of Visual Studio. The RadWindow.js file has nothing to do with your demo project or the problem - I actually tested with exactly the same code you sent. This being said, if the problem continues on your side I will really need instructions how to reproduce it on my side because the code you sent did not replicate it. Probably you could test on another machine on your side as well or send me a live url or suggest another approach to get the same result as the one you describe.

    I apologize once again for the confusion at the beginning of the video capture.

    Happy holidays!

    Kind regards,

    Svetlina
    the Telerik team

     

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  11. Alex
    Alex avatar
    15 posts
    Member since:
    Nov 2010

    Posted 04 Jan 2011 Link to this post

    Hi Svetlina,
    I am using mozila's 3.5.30729 version. Is there any version related issue?
    I tried on anothe machine and got the same issue and we are using mozila's 3.5.30729 version in all machine.
    I have watched the video sent by you and I am getting the issue in the same way as you checked in the viedo.

    And I am facing one more issue related to OnClientAppointmentClick and OnClientAppointmentDoubleClick properties of Radscheduler.
    OnClientAppointmentClick the ShowToolTipForCalendar function is being called to get tooltip and OnClientAppointmentDoubleClick the  OnClientAppointmentDoubleClick  Javascript function is being called to get edit window.
    Now when I am double clicking on the appointment, first ShowToolTipForCalendar function is being called and than OnClientAppointmentDoubleClick  function is being called. Is there any way to hide the single click function when double clicking the appointment?

    Thank you,
    Alex
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 Jan 2011 Link to this post

    Hello Alex,

     Straight to your questions:


    1) Indeed, it is possible that the version is causing the difference since everything else in our test seems to be the same. The version I tested under is 3.6.13, would you please test under it and let us know whether this changes the behavior?

    2) What I can suggest to try is the following:
        - put the code for the single click in a timeout
        - in the double click handler set some flag
        - since the single click has a timeout, if there was a double click, the flag should be already set; check it and if it shows that there was a double click, do not execute the code.

    This solution is not the best one but your requirement and how the things work make it hard to achieve what you ask about in a better manner.

    I hope that my reply is helpful, let us know hoe it goes.

    Kind regards,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017