Window popup on Mouseover but then constrained to the window on MouseOut

2 posts, 1 answers
  1. OmegaMan
    OmegaMan avatar
    8 posts
    Member since:
    Mar 2012

    Posted 03 May 2012 Link to this post

    Thanks to the forums I have been able to create a RadWindow popup when a user mouses over a RadTreeView node. But the problem I am running into is that I don't want to constrain the user to the original items surface for the mouse out to close the popup, but want to allow the user to move the mouse within the popup window to do other actions then upon mouse out close.

    Hence, I want to constrain the mouse out to the new window and not the original small node surface. But I have been unable to achieve that. Where should I put the mouse out code? Here is what I have tried, note that the windowpane variable is null and never attaches the alerts.

    function HandleHoverStart(sender, eventArgs) {
        var node = eventArgs.get_node();
        if (node != null) {
            var pos = GetElementPosition(node.get_element());
            var oManager = GetRadWindowManager();
            var metaWindow =, "DocumentMetaRadWindow");
            var windowPane = document.getElementById("RadWindowWrapperElement" + metaWindow.Id);
            if (windowPane != null) {
                windowPane.onmouseenter = function () { alert('RadWindow enter'); };
                windowPane.onmouseout = function () { alert('RadWindow out'); };
            var X = pos.x;
            var Y = pos.y;
            metaWindow.MoveTo(X, Y + node.offsetHeight);

  2. Answer
    Marin Bratanov
    Marin Bratanov avatar
    3555 posts

    Posted 04 May 2012 Link to this post

    Hi William,

    To get a reference to the RadWindow popup element you can simply call
    var windowPane = metaWindow.get_popupElement();

    Also, the wrapper you are trying to get has a different ID - the prefix is "RadWindowWrapper_" followed by the ClientID of the RadWindow instance (obtained via its get_id() method).

    Once you have this reference I hope you will be able to achieve the desired effect.

    I would also like to point you to the RadToolTipManager control. It can be relative to the nodes, can attach itself to mouseover or click events (by setting its ShowEvent property), can close only via a close button or after the user has moused over and out of its popup (by setting its HideEvent property to LeaveTargetAndTooltip), it can load its content on demand via AJAX or a WebService. I believe that this online demo is very close to your scenario and you will find it helpful.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top