This is a migrated thread and some comments may be shown as answers.

Resize radwindow automatically in Panel wizard navigation

4 Answers 239 Views

Window

This is a migrated thread and some comments may be shown as answers.

Kevin asked on 29 Jul 2011, 04:08 PM

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 would like the Radwindow to resize the height automatically in each Panel of the wizard (to reflect the content in that panel) and to remain centred in the browser. When I first open the Radwindow it autosizes to the content in the first Panel. However when I click the 'next' button to show the second content panel in the wizard, the height remains stuck at the height of the first Panel - it doesn't resize to the new content height of the second panel.

I have searched around but have not found a similar scenario to auto resize the Radwindow in a wizard Panel navigation. Any ideas?

The Telerik controls are Q3 2010 and it's ASP.NET 3.5. Thanks in advance.

Cheers

Kevin

P.S. I have also added a Div, with a width, in the Radwindow ContentTemplate as it doesn't resize properly without this - is there a more elegant solution so that I can remove this Div ideally? As I said I want to keep theRadwindow width constant - just vary height.

Secondly can I generally use RadAjaxpanel instead of asp:panel in pages? Is there a benefit or overhead to this? Sorry for all the questions but am new to these controls :)

<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">

<asp:Button ID="ButtonNext01" Text="Button1" ValidationGroup="vgText" CausesValidation="True" runat="server"

OnClick="OnClick_ButtonNext01" />

</asp:Panel>

<asp:Panel ID="panel02" runat="server">

<asp:Button ID="Buttonback02" ValidationGroup="vgText" Text="Button2" CausesValidation="True" runat="server"

OnClick="OnClick_Buttonback02" />

</asp:Panel>

</telerik:RadAjaxPanel>

</div>

</ContentTemplate>

</telerik:RadWindow>

4 Answers, 1 is accepted

answered on 01 Aug 2011, 03:40 PM

Hello Kevin,

To force the RadWindow autosize after each modification of its content you can inject a JavaScript function from the code-behind that will call the RadWindow's autoSize(true) and center() methods after each button click.

As for some content with explicit dimensions - this is necessary, as otherwise you get one interesting confrontation of concepts - a block element (such as the asp Panel, or div, or table) by default takes the width of its parent - 100% of it. This means that it tries to autosize according to the RadWIndow. In the same time we want the RadWindow to autosize itself according to this element, which leads to this obvious contradiction. This is the reason why some explicit dimensions must exist in the content. Therefore one of the best solutions is adding an empty div with no content or borders that has explicit width - it will not be visible, yet it will allow the RadWindow to autosize correctly.

As for replacing the regular panels with RadAjaxPanels (i.e. UpdatePanels) - this depends on your scenario and needs, as it has both its merits and drawbacks. If you need them only as containers then it is better to leave them as asp panels, since the RadAjaxPanel render some more HTML and JavaScript, as it provides some more functionality. What it actually does is similar to the regular UpdatePanel, so this can be used as a measure for replacing them. In short - if you wish the part of the page to perform partial postbacks (i.e. use AJAX) you can use RadAjaxPanel. If you do not need this functionality - you also do not need the RadAjaxPanel.

I hope my explanations were clear enough and will help you achieve what you need in your project.

Kind regards,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 03 Aug 2011, 06:16 PM

Hi Marin

Before I tried resizing the window, I have tried writing code to close it from a button - but this isn't working. My code is below - I am trying to reference a window called RadWindowImageEdit and close it. This code below is in a usercontrol in a page which has a master page.

Can you give me detailed help instead of referring me to other articles? I've searched and read most of your articles now it seems! I just need to get on with this... :)

Thanks.

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"

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">

<asp:Button ID="ButtonNext01" Text="Button1" ValidationGroup="vgText" CausesValidation="True" runat="server"

OnClick="OnClick_ButtonNext01" />

</asp:Panel>

<asp:Panel ID="panel02" runat="server">

<asp:Button ID="Buttonback02" ValidationGroup="vgText" Text="Button2" CausesValidation="True" runat="server"

OnClick="OnClick_Buttonback02" />

<asp:Button ID="ButtonCloseWindow" Text="Close window" runat="server" OnClick="ButtonCloseWindow_OnClick" />

</asp:Panel>

</telerik:RadAjaxPanel>

</div>

</ContentTemplate>

</telerik:RadWindow>

CODE BEHIND FOR CLOSE WINDOW:

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

Dim ScriptManager As ScriptManager = ScriptManager.GetCurrent(Me.Page)

Dim sbScript As New System.Text.StringBuilder()

sbScript.Append("<script language='javascript'>")

sbScript.Append("var oManager = GetRadWindowManager();")

sbScript.Append("oManager.hide(null, 'RadWindowImageEdit');")

sbScript.Append("</script>")

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

End Sub

answered on 04 Aug 2011, 04:08 PM

Hello Kevin,

I have replied to your other thread that has the same issue as this last post. For your convenience and for others that may stumble upon a similar scenario I am pasting my reply here as well.

There are several things that have to be noted for the code from this thread
1) the RadWindowManager does not have a hide() method, and the syntax you use for it is actually for the open method. You can find the available methods here.
2) you wold most likely need the Sys.Application.Load event, especially if a full postback is initiated, as explained in the articles linked before.
3) naming a variable the same way as its class is not recommended (the ScriptManager in this case). Moreover, the ScriptManager is a static member and can be invoked directly.
4) What I would recommend is directly targeting the specific RadWIndow as you already have its ID and ClientID as will be explained in the pasted reply below:

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.

All the best,
Marin
the Telerik team