RadAjaxPanel inside RadWindow - how to close window on server side?

[Kevin]

Hi

I am using Radwindow as a modal popup for inline form editing.  I have created a wizard, using standard 'asp:panels', inside the ContentTemplate of the Radwindow to break up the form in to smaller chunks. In each asp:panel there is a 'next' and 'back' button which is used to navigate between them. These buttons control server side functions to show/hide the various panels during navigation, and perform some form validation etc. in the background.  I need this server side functionality.

I posted a message before to prevent flickering between navigation steps and the solution provided was to use a RadAjaxpanel.  This worked fine until I try to close the Radwindow using a button with server side code.  The server side code is again necessary, as this button saves the content of the form in the Radwindow before closing the Radwindow.

The problem is that when the 'save' button is clicked the Radwindow does not disappear - it will only do this if the RadAjaxpanel is removed from the code - but I need the RadAjaxpanel to prevent the flickering! My sample code is below.  Any ideas?

Thanks in advance.

Kevin

PS This code is in a dynamically loaded usercontrol in a page with a master page - a standard 'asp:ScriptManager' is in this master page.

<asp:Button ID="ButtonAddNew" Text="Open RadWindow" runat="server" CausesValidation="false" OnClick="ButtonAddNew_Click" />


<telerik:RadWindowManager ID="RadWindowManager01" Modal="true" runat="server">
        <Windows>

         </Windows>
</telerik:RadWindowManager>



 <telerik:RadWindow ID="RadWindowImageEdit"
            InitialBehaviors="Pin"
            Skin="Sitefinity"
            Width="920"
            AutoSize="true"
            AutoSizeBehaviors="Height"
            EnableEmbeddedSkins="false"
            EnableEmbeddedBasestylesheet="false"
            Behaviors= "Close"
            VisibleTitlebar="true"
            VisibleStatusbar="false"
            KeepInScreenBounds="true"
            EnableShadow="false"
            VisibleOnPageLoad = "False"
            Modal="true"
            runat="server">

    <ContentTemplate>

 <div style="width: 867px; padding: 10px;">

    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">


            <asp:Panel ID="panel01" runat="server">
                <!--Form part 1 content here -->
                <asp:Button ID="ButtonNext01" Text="Button1" ValidationGroup="vgText" CausesValidation="True" runat="server"
                    OnClick="OnClick_ButtonNext01" />
            </asp:Panel>

            <asp:Panel ID="panel02" runat="server">
                <!--Form part 2 content here -->
                <asp:Button ID="Buttonback02" ValidationGroup="vgText" Text="Button2" CausesValidation="True" runat="server"
                    OnClick="OnClick_Buttonback02" />
 <asp:Button ID="ButtonSave" ValidationGroup="vgText" Text="Save and close window" CausesValidation="True" runat="server"
                    OnClick="Save_form_content" />
            </asp:Panel>



        </telerik:RadAjaxPanel>
  </div>
    </ContentTemplate>
</telerik:RadWindow>




Code behind for Save and open window button:



 Protected Sub ButtonAddNew_Click(sender As Object, e As EventArgs)

            'open window
            RadWindowImageEdit.VisibleOnPageLoad = True

 End Sub



 Protected Sub Save_form_content(sender As Object, e As EventArgs)

            'code to insert form items in database

            'close window
            RadWindowImageEdit.VisibleOnPageLoad = False

 End Sub

[Marin Bratanov]

Hi Kevin,


I would advise that you open and close the RadWindow by injecting JavaScript functions from the code-behind, as the RadWindow is a client-side object and is best used with JavaScript. Besides, setting the VisibleOnPageLoad property to true will result in the RadWindow reopening if another element from the page causes a postback, which is rarely the desired behavior if you want only to show it once.

How to do this is explained in this help article and here is a small example that I believe should work for you:

Protected Sub ButtonAddNew_Click(sender As Object, e As EventArgs)
    'open window
    Dim script As String
    script = "function f(){$find(" & RadWindowImageEdit.ClientID & ").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "key", script, True)
End Sub

Protected Sub Save_form_content(sender As Object, e As EventArgs)
    Dim script As String
    script = "function f(){$find(" & RadWindowImageEdit.ClientID & ").close(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "key", script, True)
End Sub

This approach is explained in the article I linked above as well.

Best wishes,
Marin
the Telerik team

[Kevin]

Hi Marin

Thanks.  However I couldn't get your code to work, as I think this is something to do with the presence of the RadAjaxpanel?

In a standard page (.aspx) (no master page etc)  I finally got the code below to work with the presence of the RadAjaxpanel, to close a window from the code behind.

However in a usercontrol (.ascx), inside a page in a master page ,the code below does not work - I'm guessing it can not find the Radwindow it's trying to reference?

Any ideas on how I get this to work inside a usercontrol?

Cheers

Kevin

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

    Dim sbScript As New System.Text.StringBuilder()

    sbScript.Append("<script language='javascript'>")
    sbScript.Append("var oWnd = $find(""RadWindowImageEdit"");")
    sbScript.Append("oWnd.close();")
    sbScript.Append("</script>")

    ScriptManager.RegisterStartupScript(Me.Page, Me.[GetType](), "EditWindow", sbScript.ToString(), False)

End Sub

[Marin Bratanov]

Hi Kevin,

    The issue here stems from the fact that the master page is an inaming container, as is an user control. This means that the IDs of the elements inside are changed by the framework. This is the reason why I used the server-side ClientID property - it holds the actual ID that the component has in the rendered HTML and this is the ID you need to use to reference it via JavaScript.

For your convenience I created and attached a simple page where this approach is used when a master page is involved. Please examine it carefully and use it as basis for your further development.

I would also recommend using the ScriptManager static member in all cases, not the ClientScript, as it tends to have issues with update panels. Also, especially when opening, I would advise that you use the Sys.Application.Load event (as in my previous example), as if the page had disposed the JavaScript would execute too early to find the RadWindow. This is explained in the help article I previously linked as well. Please also note that in an xhtml environment the needed attribute of the script tag is type="text/javascript". This, however, can be done by the framework for you by the last boolean parameter of the RegisterStartupScriptMethod - set it to true and you wouldn't need to create the <script> element yourself.


Best wishes,
Marin
the Telerik team

[Kevin]

Hi Marin

Thanks - I've got that working now! However in the last asp:panel of my wizard ("panel02") I actually have a RadAsyncupload control to upload images to a database - after uploading an image it shows a preview of the uploaded image in this panel.

The problem is when I close and reopen the Radwindow that contains these asp:panels, i.e. "RadWindowImageEdit". When I reopen this RadWindow then the RadAsyncupload is not set to it's initial state  - as it has previously uploaded an image.  The only way I can 'initialise' it at the moment is to load the page again.

Is there a way of 'initialising' RadAsyncupload (and other controls) in the code behind when I close the Radwindow - but without doing a full page refresh/load?   I need the RadAjaxPanel to remain as this prevents the flickering between asp:panel navigation.

Appreciate your help.

Cheers

Kevin

[Marin Bratanov]

Hello Kevin,

This is the expected behavior since the page is not disposed - the controls should remain in their last state. What you can do to go around this is to remove and add them again in the postback that is used to actually upload the physical file. You can also add one more step/panel which is going to be shown after an image has been uploaded. In essence - you would need to dispose and recreate the controls in order to reset their state, which would usually require a full postback of the page or at least an ajax request taht will update the desired panel only.


Regards,
Marin
the Telerik team

[Kevin]

Thanks Marin. What is the best way to dispose and recreate this control then in server side code behind?  Do you mean something like this to dispose it?

RadAsyncUpload1.dispose()

What is recommended best practice to create the control again in server side code behind?

Cheers

Kevin

[Marin Bratanov]

Hi Kevin,

You could simply remove it from its container and create a new one if you like. You can also first store its properties (such as ID, Width, Height, Events, etc) if you need and assign them to the new one. You could also create it dynamically in the first place only when it's needed (i.e. in the last button of your wizard's click). Please note that this is a general ASP.NET issue and how you handle it depends on your preferences and needs, it is not related to our controls in any way.


Regards,
Marin
the Telerik team

[Kevin]

Thanks Marin. I will try that.  Apologies for late reply - have been away.