asp:panel navigation inside radwindow - flicker problem

[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. 

The Radwindow is initially hidden on page load, but the 'ButtonAddNew' button is clicked to show it, ready to add a new item.

The problem is that during navigation between panels the page flickers badly in Chrome, Opera and IE (not in Firefox) - I guess it is posting back on the navigation button click.  The panels always appear in the end, but the flicker is annoying as a user experience.  I have tried putting a RadAjaxPanel around the RadWindowManager to try and stop the flicker - and get a smooth navigation -  but this is not working. 

Any help would be much appreciated.  I have summarised some of the main code below.  The Telerik controls are Q3 2010 and it's ASP.NET 3.5.

Thanks in advance.

Kevin

=====================================================
Note: the Radwindow is in a usercontrol.  In the Master page there is  a standard ScriptManager  - I'm using this as there are also some 'ASP.NET Control Toolkit' controls on some of the pages:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

User control with Radwindow wizard:

 

<%@ Control language="VB" AutoEventWireup="false" CodeFile="gallery.ascx.vb" Inherits="Gallery" %>

<%@ Reference VirtualPath="~/sites_admin/admin.master" %>

 

 

<!-- this buttons opens the popup -->

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

 

 

 

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

 

 

 

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

        <Windows>

 

            <telerik:RadWindow ID="RadWindowImageEdit"

            Skin="kSitefinity"

            AutoSize="true"

            EnableEmbeddedSkins="false"

            EnableEmbeddedBasestylesheet="false"

            Behaviors= "Close" 

            VisibleTitlebar="true"

            VisibleStatusbar="false"

            KeepInScreenBounds="true"      

            EnableShadow="false"

            VisibleOnPageLoad = "False"  

            runat="server">

 

            <ContentTemplate>

  

  <div style="width: 900px;  padding: 6px;">

 

 

 

 

 

<asp:panel id="panel01"  runat="server">

                           

        <!--Form part 1 content here -->         

  

<asp:button id="ButtonNext01"  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" CausesValidation="True" runat="server"

 OnClick="OnClick_Buttonback02"/>                                                   

 


 </asp:panel>

 

 

 

 

</div>

</ContentTemplate>

 

            </telerik:RadWindow>

 

 

 

        </Windows>

    </telerik:RadWindowManager>                                               

        

       </telerik:RadAjaxPanel>

 

 

 

 

 

 

 

 

CODE BEHIND:

 

'this pops up the window the first time ready to add a new item

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

 

       'some server side code here

 

        'show the modal popup

        RadWindowImageEdit.VisibleOnPageLoad = True

 

End Sub

 

 

 

 

'panel navigation

Protected Sub OnClick_ButtonNext01(ByVal sender As Object, ByVal e As EventArgs)

   

'some validation code here

 

panel02.Visible = True

panel01.Visible = False

 

End Sub

 

 

 

 

 

 

Protected Sub OnClick_Buttonback02(ByVal sender As Object, ByVal e As EventArgs)

   

'some validation code here

 

panel02.Visible = False

panel01.Visible = True

 

End Sub

[Marin Bratanov]

Hi Kevin,

The RadWindow's content is moved in the DOM when it is shown   if the ContentTemplate  is used and this is why it cannot be ajaxified like this. What I would advise is that you take it out of the RadWindowManager (this eases the use of RadAjaxPanel inside) and add the RadAjaxPanel directly in the ContentTemplate. This way the contents of the RadWindow will perform AJAX request and will not post back the entire page: http://screencast.com/t/orgcj12ZflDG. Please note that for this demo I have re-enabled the embedded skins, but this is not relevant to the case.

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


<telerik:RadWindow ID="RadWindowImageEdit" Skin="Sitefinity" AutoSize="true" EnableEmbeddedSkins="true"
    EnableEmbeddedBaseStylesheet="true" Behaviors="Close" VisibleTitlebar="true"
    VisibleStatusbar="false" KeepInScreenBounds="true" EnableShadow="false" VisibleOnPageLoad="False"
    runat="server">
    <ContentTemplate>
    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
        <asp:Panel ID="Panel3" runat="server">

        <div style="width: 900px; padding: 6px;">
            <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:Panel>
        </div>
        </asp:Panel>
        </telerik:RadAjaxPanel>
    </ContentTemplate>
</telerik:RadWindow>

Kind regards,
Marin
the Telerik team

[Kevin]

Hi Marin

Thanks for your help - I got an error and then found a simple solution.  I will post it here in case it helps others.

First  I tried putting the RadAjaxPanel inside the RadWindow ContentTemplate, which is inside the RadWindowManager-  but I got this error:

"Cannot unregister UpdatePanel with ID 'ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$ctl03$RadWindowImageEdit$C$RadAjaxPanel1Panel' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported.
Parameter name: updatePanel"

The RadWindowImageEdit is in a user control which is dynamically loaded in a page.  The Scriptmanager is on the Master page for that page.  I have tried both the standard ASP.NET ScriptManager and the Telerik one but both give the error above.

However, after some searching, I  found a simple solution in another post.  I put the Radwindow outside the RadWindowManager (see below).

Thanks for your quick support - it is appreciated.

Cheers

Kevin

<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" Skin="Sitefinity" AutoSize="true" EnableEmbeddedSkins="true"
    EnableEmbeddedBaseStylesheet="true" Behaviors="Close" VisibleTitlebar="true"
    VisibleStatusbar="false" KeepInScreenBounds="true" EnableShadow="false" VisibleOnPageLoad="False"
    runat="server">
    <ContentTemplate>

    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
        <asp:Panel ID="Panel3" runat="server">

        <div style="width: 900px; padding: 6px;">
            <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:Panel>
        </div>
        </asp:Panel>
        </telerik:RadAjaxPanel>

    </ContentTemplate>
</telerik:RadWindow>

[Svetlina Anati]

Hi Kevin,

 Moving the RadWindow outside the RadWindowManager is indeed the best solution for the case. The problem comes from the update panels behavior when they are removed by using the method Clear() which happens for the Windows collection of the RadWindowManager. Furthermore, by moving a declared in markup RadWindow outside the RadWindowManager you will not use any functionality except for radopen which can be successfully replaced by using show() (the only problem could be IDs in INaming Containers but there are also different techniques to resolve that).

More information about this is available below:

http://www.telerik.com/support/kb/aspnet-ajax/window/cannot-unregister-updatepanel-with-id-updatepanelid-since-it-was-not-registered-with-the-scriptmanager.aspx

All the best,
Svetlina
the Telerik team