app_code window open problem

[Kevin]

Hi

Thanks for all your help so far.  I now have an 'ASP.NET AJAX Control Toolkit' modal popup from within which I am opening a Radwindow. This Radwindow  must appear above the modal popup with a preview URL.  The preview button triggers the following code behind, which works fine:

Protected Sub ButtonPreviewWindow_OnClick(ByVal sender As Object, ByVal e As System.EventArgs)

        'keep the modal popup showing
        ModalImagePopup01.Show()

        Dim sbScript As New System.Text.StringBuilder()
        Dim strNewURL As String = "http://www.bbc.co.uk"

        sbScript.Append("var oWnd = $find('" & RadWindowPreviewSite.ClientID & "');")
        sbScript.Append("oWnd.setUrl(""" & strNewURL & """);")
        sbScript.Append("oWnd.setActive(true);")
        sbScript.Append("oWnd.show();")

        ScriptManager.RegisterStartupScript(Page, Me.GetType(), "key", sbScript.ToString(), True)

    End Sub

Now I have many of these to trigger so I tried to move this code in to a class in my app_code folder:

Public Shared Sub RadWindow_ShowWindow_PreviewURL(ByVal RadWindow As RadWindow, ByVal strNewURL As String)

            Dim sbScript As New System.Text.StringBuilder()
             Dim page As Page = DirectCast(context.Handler, Page)

            sbScript.Append("var oWnd = $find('" & RadWindow.ClientID & "');")
            sbScript.Append("oWnd.setUrl("""" & strNewURL & """");")
           sbScript.Append("oWnd.setActive(true);")
            sbScript.Append("oWnd.show();")

            ScriptManager.RegisterStartupScript(page, GetType(Page), "key", sbScript.ToString(), True)

        End Sub

I call this using:

Protected Sub ButtonPreviewWindow_OnClick(ByVal sender As Object, ByVal e As System.EventArgs)

TelerikFunctionality.RadWindow_ShowWindow_PreviewURL(RadWindowPreviewSite, "http://www.bbc.co.uk")

End sub

However it doesn't open a new Radwindow - sometimes it does in Firefox for the first preview click (and then nothing after) - in other browsers nothing happens at all. 

Any ideas?

Thanks in advance.

Kevin

[Marin Bratanov]

Hi Kevin,

Here are some issues I see in your code:
1) I am not sure how you get a reference to the current page, but simply current will not suffice. You can see how I did it in the attached sample
2) there are too many quote marks in the setUrl() call
3) you do not use the Sys.Application.Load event, as we discussed in your previous threads, which results in the script being executed too early - before the RadWindow is created

I have modified your code and it works fine on my end. You can compare my implementation with yours if you wish. What I would recommend, though, is that you place a RadWindowManager on your pages (or even better - on your master page if you use one) and simply inject a call to radopen() instead of going to all this trouble.


Kind regards,
Marin
the Telerik team

[Kevin]

Thanks Marin.  That works now.  Apologies for late reply - have been away.

I now have another problem :)  I have added 'maximize' as a behaviour to the Radwindow.  However when I click the maximize icon the Radwindow now disappears behind the ASP.NET AJAX Control Toolkit' modal popup - when it should stay on top of it-  I'm guessing it's losing its' z-index which was set in the RadWindowManager?



<telerik:RadWindowManager ID="RadWindowManager1"  runat="server" Style="z-index: 100000" />


  <telerik:RadWindow ID="RadWindowPreviewSite"
            InitialBehaviors="Pin"
            Skin="kSitefinity"
            EnableEmbeddedSkins="false"
            EnableEmbeddedBasestylesheet="false"
            Behaviors="Close,Maximize"
            VisibleTitlebar="true"
            VisibleStatusbar="false"
            KeepInScreenBounds="true"       
            EnableShadow="false"
            Width="900"
            Height="500"
            Modal="true"         
            runat="server">                     
            </telerik:RadWindow>

Finally is there a way of autosizing the height of the Radwindow to be a percentage of the main browser window?  If I set 'Autosize=true' the Radwindow height is 100% of the main browser window height - I would like to set it to be 90%, so that the user still sees it as a window , but can see as much content as possible in that Radwindow.

Many thanks.

Cheers

Kevin

[Marin Bratanov]

Hi Kevin,

What I see is that the RadWindowPreviewSite RadWIndow is not in the RadWindowManager that has the high z-index set. This means that it will have the default z-index of 3000. I would also advise checking if the RadWindow will hide behind the ACT's modal popup if simply moved, without being maximized. If this is the case the most probable reason for this behavior is that the ACT's modal popup has an even higher z-index. You can easily verify if this is the case by using a tool like FIrebug for FF or the IE Dev toolbar. Once you know the values you can modify them accordingly (at least for the RadWIndow). Generally the RadWindow gets a very high z-index when maximized, this can be controlled via the ShowOnTopWhenMazimized property (true by default).

As for the percentage - the RadWindow controls does not support the scenario where its size is set in percent, it requires pixels. The AutoSize property is designed to size the RadWindow according to its contents (well, they need to have some dimensions set, if they don't the RadWindow will quite often become as tall as the screen as there is no way to calculate the size of the content). It is not designed to fit it in the browser's viewport. What you can do is attach to the window's resize event, get the viewport size and use the RadWindow's client-side api to resize it accordingly. You may find useful our jQuery, the pageLoad() function and our static library's getViewPortSize() function.


Best wishes,
Marin
the Telerik team

[Kevin]

Hi Marin

What I forgot to mention before is that the Radwindowmanager is in a page and the Radwindow is in a usercontrol that is dynamically loaded in to that page. Having said that, if I change the z-index in the  Radwindowmanager then it does affect whether the Radwindow appears on top of the ACT modal popup.

In the current set-up I have added 'move' and resize' to the Radwindow behaviours and it still stays on top - it's only when I 'maximize' that it goes behind the ACT modal popup.  If I put the Radwindow inside the Radwindowmanager in the user control it still does the same ie 'move' and 'resize' work but 'maximize' doesn't.

Additionally in my code behind that opens the Radwindow I have 'setactive=true':

 

''' <summary>

       ''' opens a RadWindow with a preview URL

       ''' </summary>

       Public Shared Sub RadWindow_ShowWindow_PreviewURL(ByVal RadWindow As RadWindow, ByVal strNewURL As String)

 

           Dim sbScript As New System.Text.StringBuilder()

           Dim page As Page = DirectCast(HttpContext.Current.Handler, Page)

 

           sbScript.Append("function f(){")

           sbScript.Append("var oWnd = $find('" & RadWindow.ClientID & "');")

           sbScript.Append("oWnd.setUrl(""" & strNewURL & """);")

           sbScript.Append("oWnd.setActive(true);")

           sbScript.Append("oWnd.show();")

           sbScript.Append("Sys.Application.remove_load(f);}")

           sbScript.Append("Sys.Application.add_load(f);")

 

           ScriptManager.RegisterStartupScript(page, GetType(Page), "key", sbScript.ToString(), True)

 

       End Sub


Secondly thanks for the info on resizing the Radwindow as a percentage of the browser window.  Unfortunately I don't have time to go in to all of that now (deadline to meet so will leave it out for now...) - is there any way of incorporating that as a control property that you can set in future editions of Radwindow?  It's a  good control but, from my deadline/time perspective I have spent alot of time getting in to additional Javascript stuff which I prefer to avoid, as it's not really my area. I was hoping for a control that would largely hide all this Javascript from view for me.

Now I know some developers will think that I should be getting more involved with all that stuff - but I'm in a very small company wearing several different web hats with tight deadlines - I can't do everything :) - the simpler you can make your controls to use the better as far as I'm concerned i.e. less external Javascript... do your other controls also involve so much external Javascript?

Cheers

Kevin

[Marin Bratanov]

Hello Kevin,

I tested this with the latest AjaxControlToolkit dll and I was not able to see this behavior: http://screencast.com/t/1JcEEFmGFd2y. You can find my test page attached. Please compare it with yours and try to locate any major differences that may be causing this.What I see is that the AjaxControlToolkit's modal popup extender has a z-index value of 10001 and its modal background - 10000. This means that a RadWindow with the correct z-index should popup above them. I am still thinking that somehow the RadWIndow's initial z-index might be incorrect. Regardless of the cause of the behavior you describe without examining it I cannot say what the reason might be. As for the setActive - this method is related to other RadWindows, not to the controls from ACT.

As for the JavaScript - I am sorry that you feel this way, but this is the way RadWindow works - it is purely a client-side object and thus is manipulated via JavaScript. This is also one of its main advantages over the standards ASP controls - it offers a rich client-side api that allows you to control it without a postback - less network delay and less server load.

For your convenience I created and attached a simple example of resizing the RadWindow to a percentage of the browser's viewport. I hope you will find it easy enough to implement with my sample. You can see it in action in this video: http://screencast.com/t/QbwvQ4iNC.

I am not sure what you mean under internal and external JavaScript, but our controls can be used with little JavaScript as well as by utilizing their full capabilities via writing a lot of script. The basic functionality of the RadWIndow can be controlled via its server-side properties, and the only compulsory JavaScript is the show() method.


Greetings,
Marin
the Telerik team

[Kevin]

Hi Marin

Thanks for your help once again.  I have tried the 'resizing  Radwindow according to browser viewport size' script in my code behind that we discussed before - it's below.  It works fine, except that when you scroll on the main browser window the new popup Radwindow becomes taller than the browser viewport window.  In other words it works fine if the main browser scrollbar is in the top position (it fits in the main viewport as a percentage of the viewport size)  - but if the main scrollbar has been scrolled further down then the popup Radwindow is taller than the main browser viewport size (so that you can not see the top or bottom of the popup Radwindow). Any ideas?

Public Shared Sub RadWindow_ShowWindow_PreviewURL(ByVal RadWindow As RadWindow, ByVal strNewURL As String)

            Dim sbScript As New System.Text.StringBuilder()
            Dim page As Page = DirectCast(HttpContext.Current.Handler, Page)

            sbScript.Append("function f(){")
            sbScript.Append("var oWnd = $find('" & RadWindow.ClientID & "');")
            sbScript.Append("oWnd.setUrl(""" & strNewURL & """);")
            sbScript.Append("oWnd.show();")

            'script to resize the window according to browser viewport size
            sbScript.Append("var viewPortSize = $telerik.getViewPortSize();")
            sbScript.Append("oWnd.moveTo(0, 0);")
            sbScript.Append("oWnd.setSize(viewPortSize.width * 0.8, viewPortSize.height * 0.9); ")
            sbScript.Append("oWnd.center();")

            sbScript.Append("Sys.Application.remove_load(f);}")
            sbScript.Append("Sys.Application.add_load(f);")

            ScriptManager.RegisterStartupScript(page, GetType(Page), "key", sbScript.ToString(), True)


        End Sub

I appreciate your help in all of this and they are good controls - in my short experience, and looking at the problems in many other forum posts, I just think it would be more useful if much more of the Javascript could be embedded in the controls as properties that can be set. 

Alternatively, or in addition, it would be very useful if many more end-to-end, complete code samples could be added to to your good support section - for  scenarios such as mine above and for many others that have been posted - they must come up time and time again, and would be useful for everyone all in one central place. Also complete examples using  master pages, user controls, code behind etc as in many dev situations - not just straightforward pages or inline Javascript. You have sent me some very good additional code examples which could be usefully shared in  in a support section.   Just my thoughts from my experience so far... :)

Best regards

Kevin

[Marin Bratanov]

Hi Kevin,


Please note that the code you pasted does not contain the functionality I showed in my previous post - for example - the window.resize event is not handled at all. Also the oWnd variable should be global so that the resize handler should be able to access it.

As for the incorrect resizing - please try using the getClientBounds() function.

That being said - I just translated my JavaScript to the string builder you use and it seems to be working correctly on my end: http://screencast.com/t/nZu7YwvmbcQ. You can find my test page attached.

Please note that I generally advise against such an approach, because
1) the performance will drop, especially if a heavy page is loaded within. This is due to the fact that the window.resize event is fired numerous times and thus a great number of calculations are required for the short amount of time the browser is being resized. You can improve this by resizing the RadWindwo only once the browser has been resized
2) You already have the RadWindow on the page and thus taking out all the relevant JavaScript to the code-behind is quite pointless. A master page containing the needed scripts would be more comfortable, would spare the postbacks and would thus improve the performance.


As for the other part of your post - quite a lot of functionality is already built in as properties. RadWindow in particular has over 30 server-side properties that affect is behavior and are ultimately achieved via JavaScript. We try to put some limit to that, as a great number of properties becomes confusing at one point. Therefore functionality that is currently not part of the built-in options the RadWindow offers is not embedded in its code and properties. Size in percentage is generally not a scenario the RadWindow supports and thus if you want to achieve it you would need to write your own code for that.

On the subject of end to end examples - we offer a number of online demos that cover the basic functionality of the standalone RadWindow and also some of the most common scenarios. If somebody has an interesting implementations he/she can submit it to the Code Library section and if the scenario is valid and there are no issues with the code we will be happy to publish it and award the sender with some Telerik points.

This is actually the first time I've encountered such a scenario (working with the RadWindow entirely from the server and even not from the actual code-behind of the page) and all the samples I've sent have been build to answer your specific questions. The forum offers a search engine and if your question is common there is usually an answer in the forums already. Also, working with master pages and user controls is considered general ASP knowledge - ClientIDs, page lifecycle, working with JavaScript, etc and thus is not actually an issue with our controls.

Best wishes,
Marin
the Telerik team