Sys.ArgumentOutOfRangeException: Value must be an integer.

[tlp]

Hello,

I seem to be getting the following script error when trying to display a tooltip at a required location on the screen.

Sys.ArgumentOutOfRangeException: Value must be an integer. Parameter name: x Actual value was -194.80000019073486.

The error is generated within the function Sys$UI$Bounds(x, y, width, height).

It seems that the error can be generated by changing the zoom level within Internet Explorer. If the zoom level is 100% then the resolution of the screen is mapped 1-to-1 based on the video card resolution. If the zoom level is changed to 150% (in our example), then the video card resolution no longer corresponds to a 1-to-1 mapping based on the zoom level set within Internet Explorer. As a result, x and y values on the screen generate decimal values instead of integer values and thus the exception occurs.

Any help in resolving this issue would be appreciated.

Thanks,
Tony

​

[Marin Bratanov]

Hello Tony,

If this is where the exception originates, I doubt we can do anything to fix it because this is a function built-in the MS AJAX framework: http://msdn.microsoft.com/en-us/library/vstudio/bb383818(v=vs.100).aspx.

Nevrtheless, the following seemed to work fine for me:

<asp:Button ID="Button1" Text="text" runat="server" />
<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="Button1" Position="BottomCenter" RelativeTo="Element"
    Width="200" Height="100" Text="lorem ipsum dolor sit amet" HideEvent="ManualClose"></telerik:RadToolTip>

Thus, I am not exactly sure what could be causing this issue and if you can find the function that thorws the error my best suggestion is to attempt to override it in order to add a parseInt() call. If it is one of ours, if you tell me which one it is, I will try to show you an override.

Regards,

Marin Bratanov
Telerik

 

 

[tlp]

Marin,

Thanks for your response. I did use your sample code to try and reproduce the error but was unable to do so. I even modified the sample to make it work similar to our project but still could not reproduce the issue. I have attached the exception as provided by the IE developer tools debugger which shows where the exception is occurring.

As indicated, if the zoom level is set to 100%, the error does not result. In this case, the exception is generated when the zoom level is set to 150%. Note that it does not happen at all zoom levels.

Thanks,
Tony
 

[Marin Bratanov]

Hello Tony,

If you cannot reproduce the issue outside of your project, it is possible that something specific in that project is causing the problem (e.g., a modified MS AJAX bundle that can come from packages installed on that project, like AjaxControlToolkit or AspNet.ScriptManager.jQuery). You could try to remove bits and pieces from this project to see which is the culprit.

You can also try disabling animations (set Animation=None) to see if this helps.

Nevertheless, here is how to override our built-in functions in case this is where the decimals originate from:

Telerik.Web.UI.RadToolTip.prototype._getBoundsRelativeToBrowser = function(popupBounds, calloutBounds, targetBounds)
{
    //all the other original code goes here
    x = parseInt(x, 10);
    y = parseInt(y, 10);
    popupBounds.width = parseInt(popupBounds.width, 10);
    popupBounds.height = parseInt(popupBounds.height, 10);
    return new Sys.UI.Bounds(x, y, popupBounds.width, popupBounds.height);
}

This shows how to override the _getBoundsRelativeToBrowser method and since the screenshot does not clearly show which method it is (_getBoundsRelativeToBrowser, _getBoundsRelativeToElement or _getBoundsRelativeToMouse) I cannot provide exact code. Nevertheless, all three return similar objects and you can find the one you need in the RadToolTip.js file in the RadToolTip Scripts folder in our source code.

Just make sure to add such JavaScript overrides at the end of the page that has the tooltips (just before the closing </form> tag) in order to make sure they are after the original scripts.


Regards,

Marin Bratanov
Telerik

 

 

[tlp]

Marin,

Thanks for the guidance. We tried setting the Animation=None but the issue still occurred. What we did find out is that if we set the property RelativeTo=BrowserWindow or RelativeTo=Element the issue does not occur. When we set the RelativeTo property to Mouse, the exception does occur.

Based on your provided code sample we did end up overriding one of the built-in functions. It seems that the function _getMousePostion(), which is used within _getPosRelativeToMouse, is causing the decimal component in the x and y values.
In our case, the following built-in function was overridden and thus resolved our issue:

Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function(targetBounds)
{
    // *** Original code from built-in function ***
    var elemX = targetBounds.x;
    var elemY = targetBounds.y;

    //Get last recorded mouse position
    var pos = this._getMousePosition();
    var mouseX = pos.clientX;
    var mouseY = pos.clientY;

    //Take into consideration the offsetScroll!
    var standard = $telerik.standardsMode;
    //$telerik.standardsMode does not do a good job! Extra check is needed for FF!!
    //And yet another check needed for Safari! It should always be set to false in order to get the calculations right
    if (!$telerik.isIE && document.compatMode != "CSS1Compat") standard = false;
    else if ($telerik.isSafari) standard = false;

    if (standard)
    {
        elemX -= $telerik.getCorrectScrollLeft(document.documentElement);
        elemY -= document.documentElement.scrollTop;
    }
    else //NEW: Add support for quircksmode
    {
        elemX -= $telerik.getCorrectScrollLeft(document.body);
        elemY -= document.body.scrollTop;
    }

    //Calculate the position of the mouse, relative to the targetcontrol
    var deltaX = mouseX - elemX;
    var deltaY = mouseY - elemY;
    // *** ***

    // *** Ensure that integer values are returned. ***
    deltaX = parseInt(deltaX, 10);
    deltaY = parseInt(deltaY, 10);
    // *** ***

    return { x: deltaX, y: deltaY };
}

Thanks again for your help on this issue.

Tony

[tlp]

Marin,

FYI:

We did end up reproducing the issue using a sample project. After further investigation, it was determined that the use of the ASP ScriptManager in the page causes the issue. Using RadScriptManger in the page does not cause the issue. Provided is the markup and code behind to reproduce the issue. (Note that the image that was used for the image button was 16x16 pixels.) As indicated, setting the zoom level to 100% will not produce the issue. In our case, setting the zoom level to 150% will produce the issue.

<asp:ScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" />
<div>
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/ViewSettings16.png" />
    <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="ImageButton1" RelativeTo="Mouse"
        Width="200" Height="100" Text="lorem ipsum dolor sit amet" HideEvent="ManualClose" ShowEvent="OnClick"></telerik:RadToolTip>
</div>
<telerik:RadToolTipManager runat="server" ID="ToolTipManagerSettings" Width="200px" Height="100px" Animation="Resize" ShowCallout="false"
    ManualClose="true" RelativeTo="Mouse" HideEvent="ManualClose" ShowEvent="OnClick" OnAjaxUpdate="ToolTipManagerSettings_AjaxUpdate">
</telerik:RadToolTipManager>

protected void Page_Load(object sender, EventArgs e)
    {
        ToolTipManagerSettings.TargetControls.Add(ImageButton1.ClientID, "1", true);
    }

    protected void ToolTipManagerSettings_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)
    {
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl("lorem ipsum dolor sit amet"));
    }

Thanks,
Tony

​

[Marin Bratanov]

Hello Tony,

Thank you for the sample. This seems to be a bug in IE - when zoomed, the mouse coordinates are not always integers and this is the basis which RadToolTip uses to fetch the mouse coordinates:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/icon_16x16.png" onmouseover="showMouseCoords();" />

function showMouseCoords(e) {
    var e = e ? e: window.event;
    if (!e) return;
    console.log(e.clientX + " " + e.clientY);
}

Nevertheless, I am logging this case for review so our developers can see if this can be improved on our end. I have also updated your Telerik points as small token of gratitude for your efforts.


Regards,

Marin Bratanov
Telerik