Client-Side opening of windows does not behave as expected

[Corey]

I am working on an interface where the basic concept is to have multiple RadWindows open within a single browser. Each window will contain different things, reports, tools, administration interfaces, etc... The way this is meant to be used means I would not be able to have a predefined set of RadWindow controls in the aspx. I have been trying to open the windows client-side using the following code:

function OpenWindow() {
            var oWnd = radopen("http://localhost/MAG_ConsoleServer/Platform_EmailManagement.aspx");
            oWnd.set_title("Email Management");
            //oWnd.setSize(1055, 690);
            oWnd.set_height(690);
            oWnd.set_width(1055);
            oWnd.set_top(38);
            oWnd.set_left(108);
            oWnd.show();
            return false;
        }

The above code will open a window however the size settings (I've tried both set_height/set_width and setSize) do not work, nor do the positioning settings. The only way I can get these settings to work is if I define the RadWindow in the aspx, and do a $find for the control instead of a RadOpen. 

I'm also having issues with the client events for the RadWindow. If I try setting javascript handlers for things like OnClientDragEnd or OnClientResizeEnd, then I am finding more weird behavior. Defining the events in the RadWindowManager control itself results in those events firing on pageload multiple times per defined window, my count is 4 per window. If I define those events in a RadWindow control in the aspx itself then I get the event at the right time, however I get the following error for the OnClientDragEnd and similar errors for the other events: 

Uncaught TypeError: Property '0' of object  is not a function Telerik.Web.UI.WebResource.axd:6
(anonymous function) Telerik.Web.UI.WebResource.axd:6
Telerik.Web.UI.RadWebControl.raiseEvent Telerik.Web.UI.WebResource.axd:785
a.RadWindow.onDragEnd Telerik.Web.UI.WebResource.axd:6692
a.ResizeExtender._raiseDragEvent Telerik.Web.UI.WebResource.axd:5825
a.ResizeExtender._onDocumentMouseUp Telerik.Web.UI.WebResource.axd:5982
(anonymous function) Telerik.Web.UI.WebResource.axd:6

Can someone help me figure this out so I can move forward with this concept? Between the errors and the inconsistent functionality I am stuck. 

[Marin Bratanov]

Hello Corey,

In order to change the size and position of RadWindow you should use the setSize(width, height) and moveTo(x, y) methods. Doing so after radopen() should allow you to resize your popups. You can also try adding a small timeout before executing the setSize() and moveTo() methods. Even 0ms could be enough. Also not that a second argument is needed by radopen: http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html.

On handlers - when adding them you only need the function name, both in the markup properties and in the dynamic methods: http://www.telerik.com/help/aspnet-ajax/window-programming-setting-client-events-using-javascript.html. There is also a code example after the method list.

I am also attaching a small sample that shows both approaches at work. I hope it helps.


All the best,
Marin Bratanov
the Telerik team

[Corey]

I've managed to get the windows to size properly using the setTimeout workaround you provided. However in IE8 the windows do not get resized for some reason. I also noticed that in both Chrome and Safari on an iPad the windows ignore any width and height setting and instead end up being around 300px wide, with a very large height setting probably 1024 from the iPad's resoultion. Is there a way to get this to work properly in both of these situations? 

[Marin Bratanov]

Hello Corey,

Can you confirm there are no JavaScript errors in IE before the code that resizes the RadWindows? I cannot think of another reason for this behavior. On the iPad - there have recently been some fixes on that, because it has many limitations and bugs related to iframes (which is what RadWindow has to use), so I advise you try the latest  version of the suite and see if it works better with you. Currently this is Q3 2012 SP2. In case you still cannot resolve this I suggest you modify my example to show the problems you are having and mimic your actual scenario, then send it back to me so I can actually investigate the case, instead of trying to guess.


Greetings,
Marin Bratanov
the Telerik team

[Mike]

I believe there is a problem with setSize as well.  Although my issue is present in Firefox along with IE.

I'm grabbing my window using windowManager.getWindowByName();

I'm reusing the same window for this particular view and changing url, title, and size.  I can set the size on the first open only, after that it won't change. 

I am doing setSize before calling show().

[Marin Bratanov]

Hello Mike,

Generally, a RadWindow should be manipulated after it is shown:

<script type="text/javascript">
    function openRw(width, height)
    {
        var wnd = GetRadWindowManager().getWindowByName("RadWindow1");
        wnd.show();
        wnd.setSize(width, height);
        wnd.center();
    }
</script>
<asp:Button ID="Button1" Text="open the RadWindow 800x600" OnClientClick="openRw(800, 600); return false;"
    runat="server" />
<asp:Button ID="Button2" Text="open the RadWindow 640x480" OnClientClick="openRw(640, 480); return false;"
    runat="server" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
        <telerik:RadWindow ID="RadWindow1" runat="server">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

I am logging the idea that setSize should work for RadWindows that are not yet shown here, so you can monitor and vote for it.

What I can also advise is using the new parameters radopen() and wndManager.open() provide for presetting width, height and position of the RadWindow that will be opened: http://demos.telerik.com/aspnet-ajax/window/examples/radopen/defaultcs.aspx.

Greetings,
Marin Bratanov
the Telerik team

[Mike]

My code looks like this.  I typed this out as I can't copy and paste from where the code sits.  The only difference between my real code and this is I have some extra code to track what windows have callbacks on them to remove them when the page is unloaded.  This seemed cleaner than to me than having the callback removed in the close callback itself. That code works just fine and has no change on the below code when run. 


I've tried adding a timeout to the setSize with no change.  When I move window.show() before the the resize as I have it below, it never works and the default size is shown. If I have setSize before show, at least the first time the named window is shown it has a size.  I've tried various combinations of where show() is called and with timeouts around code. 

setSize should certainly be able to be set before show is called.  Honestly it doesn't make sense to resize it after show in many cases, such as mine.  I'd be okay setting it after if it worked..... 

I've been modularizing my code with typescript so I created a private variable for radWindowManager 

My dll version is: 2012.3.1016.40

Your sample is basically doing what I need.  Thanks.

function showWindow(url, name, closeCallback, title, width, height, x, y)
{
      var window = this.windowManager.getWindowByName(name);

      if(window)
          window.setUrl(url);
      else
          return;

      if(title)
          window.set_title(title);

       if(closeCallback)
          window.add_close(closeCallback);

       window.show();

       if(width && height)
          window.setSize(width, height);

       if(x && y)
          window.moveTo(x, y);

       return window;
}

[Mike]

I just tried doing var window = radopen(url, windowName, width, height, x, y) with the same results.  Width and height are not being set unless I put them in the markup.  The result is the same if windowName is a defined window or null.

[Marin Bratanov]

Hi Mike,

The additional parameters to radopen() are available since Q1 2013.

That aside, the code snippet you pasted seems to work fine with me. You can find attached my test page and a video from my experiment that you can run in your browser. I only changed the variable name because window is a reserved name for the browser window object and I advise that you avoid using it.

In case comparing your code with mine does not yield a resolution I advise that you either employ this approach, or modify my sample to show your problem and send it back to me so I can investigate the case.


All the best,
Marin Bratanov
the Telerik team

[Mike]

Thanks for the help.

First I updated my project to have the latest DLLs.  Renamed my window variable (stupid mistake), and ordered my code exactly like yours. 

What I have found is that the only thing that is working for me is to dynamically build the window. i.e. radopen(url, null, w ,h, x, y) now works consistently.

As soon as I have a named window, it stops working. One observation I have is it seems height will resize if it's to be smaller, but not larger. My result is the same if I have a setTimeout on the resize and move functions. 

I wish I could send you my project, but it's not possible.

Edit.  I confirmed width consistently gets set! 

[Marin Bratanov]

Hello Mike,

I am sorry to hear that you are still having difficulties with this, but without being able to examine this I am afraid I cannot offer any significantly different ideas or workarounds. Once you can send us a sample that will reproduce the problem we will investigate it right away.

For the time being you can use the approach with opening a new popup each time and its client-side API can be used to set all necessary properties, including DestoryOnClose to avoid having many unused instances.

What I can also suggset is that you make sure you have neither MaxWidth, MaxHeight, MinWidth or MinHeight set for the manager, nor a RestrictionZoneID because if these properties are respected you may have behaviour similar to what you describe. You can also confirm if you are using the correct manager if there is more than one instance. This help article explains how to do that.


Regards,
Marin Bratanov
the Telerik team

[Mike]

You know, I thought I remember the restricted zone id somewhere else.  That is what is different!  Unfortunately due to design, though I don't agree with those that made the decision, they want the windows restricted.  

I am curious to know why the restricted zone causes this behavior though.  If the window can fit with the desired size it should still work.

Thanks for the help.

I cannot use the latest release currently due to what I hope is a minor issue with the treeview, so I can't take advantage of the positioning of the windows.

[Marin Bratanov]

Hi Mike,

When a RadWindow resizes its top left corner stays in place and when there isn't enough room in the zone this operation will not be performed. You can try first calling moveTo(0,0) to provide the most available space before calling setSize().


Regards,
Marin Bratanov
the Telerik team

[Mike]

I finally got the latest DLLs back into my project.  I am opening the the windows dynamically and destroying on close.    I have noticed that setting the x and y in radopen does not work.  If I set it via a setTimeout of 0 it works.

[Marin Bratanov]

Hi Mike,

I am glad to hear that you have some working code now. If you send us a small, runnable sample we can inspect we will check it right away to see if this a peculiarity in your scenario or a problem with the control.


Kind regards,
Marin Bratanov
the Telerik team

[Mike]

I'll work on a sample project to see if i can recreate the issue.