[Solved] RadWindow Resize problem due to URL in Status Bar

[RR]

I tried using the solution stated here but it does not work:
http://www.telerik.com/community/forums/thread/b311D-bctcdg.aspx

The modal popup window has a RadGrid which is populated from a database. So it takes some time for the grid to appear while it populates the data.

Here is the ASPX code:
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"  VisibleStatusbar="false">
        <Windows>
            <telerik:radwindow runat="server" ID="RadWindow1"           
                VisibleOnPageLoad = "false"              
                OffsetElementID = "offsetElement"                    
                Title = ""
                Height="550px"
                Width ="300px"
                Skin="Default" BackColor ="Transparent"                        
                Behaviors="Close,Reload,Move"
                EnableAjaxSkinRendering="true"
                ShowContentDuringLoad="false" VisibleStatusbar="true" Modal="true" Animation="None" VisibleTitlebar="true" DestroyOnClose="false" BorderWidth="0" ReloadOnShow="true" BorderStyle="None"                                 
                   OnClientClose="OnClientClose" >
        </telerik:radwindow> 
     </Windows>
    </telerik:RadWindowManager>

The url is constructed dynamically after several conditions are checked to construct a query string. The url is pretty long.

The radwindow is shown through the following javascript:
function openRadWindow(url, RadWindowID, RadWindowManagerID)
        {               
            var oWnd = $find(RadWindowManagerID).GetWindowByName(RadWindowID);                             
            oWnd.SetUrl(url);
            oWnd.Show();
            return false;
        }


I tried something like this:
function OnClientShow(radWindow)
{                    
    radWindow.SetHeight(550);
    radWindow.SetWidth(300);
}
 but the problem is that it does call this event, but once the grid is populated in the popup the url in the status bar resizes the window's width after the OnClientShow event is fired.

The main objective is to show that some work is being done or a loading panel while the grid in the popup is being populated. The status bar takes care of that but once the url is loaded it resizes the window. And since radajaxloadingpanel and RadAjaxManager only work for updates and not on page load, that does not help either. I tried using the example
http://www.telerik.com/help/aspnet/ajax/?ajxShowLoadingPanelOnInitialPageLoad.html

It works but the loadingpanel on page load appears after the the loadingpanel inside of the radwindow statusbar goes away, which again is too late. I know that I can change the skin but this is the skin that is required.

The most accurate loading panel is the one that is inside of the radwindow statusbar.

So, basically I want to retain the current behavior, but somehow restrict the window resize due to the url.

Regards,
Tal

[Svetlina Anati]

Hi RR,

Your approach is correct but I noticed that you are using RadWindow "Prometheus" and at the same time you use the client-side API of RadWindow for ASP.NET. You will need to use the new client-side API which is accordingly to the ASP.NET AJAX naming convention




Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[RR]

Thank you for your response.

I did as you directed and changed all javascript code to Prometheus.   

function openRadWindow(url, RadWindowID, RadWindowManagerID)
{               
            var oWnd = $find(RadWindowManagerID).getWindowByName(RadWindowID);                     
            oWnd.setUrl(url);            
            oWnd.set_Title("Parameter Page");           
            oWnd.add_close(OnClientClose);
            oWnd.add_show(OnClientShow);
            oWnd.show();          
            return false;
}

 function OnClientShow(sender, eventArgs)
     {
        sender.set_Height(550);
        sender.set_Width(300);
     }   

 function OnClientClose(radWindow)
     {    
        var args = radWindow.argument;       
        if(args != null)
        {
            var controlid = args[0];
            var oWnd = $find(controlid);       
            oWnd.set_value(args[1]); 
            radWindow.argument = null;                    
        }           
     }

And it still does not fix the problem.

Tal

[Georgi Tunev]

Hello Tal,

In this case please open a new support ticket and send us a small project where the problem can be reproduced. Make sure that the project can be run locally and attach it to the support thread - we will check it and do our best to help.



Greetings,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Stephane Zanoni]

I'm having the same issue.

I've even tried setting the status to stop the window from resizing (only happens in IE), FireFox seems to have the proper overflow behavior...

I've actually noticed that the set_Status, doesn't even change the status.

[Svetlina Anati]

Hi guys,

I suggest setting the new size with a little timeout, in fact setting time interval equal to 0 will also do the trick, as shown below:

 function ResizeWindow()
    {
       var oWnd = $find( "RadWindow1" );
       setTimeout(function()
       {
         oWnd.setSize(200,200);
       }
       ,0);
    }

For your convenience I prepared a sample project which demonstrates the desired behavior - you can find it in the attached archive file.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Stephane Zanoni]

Thanks for the reply, what I ended up doing was calling the:

oWindow.set_visibleStatusbar(false);

That way, I don't have the resizing issue, setting the timer to-re-re-re-size the window doesn't really work.

[AJtheCoder]

Since I'm having the same issue, I thought I'd demonstrate the problem. If anyone's found a fix aside from the ones I've tried, please post!

The following example should work as-is. No other files are required. Please excuse the humor in the alert messages - such things make my life less tedious. Thank you!

	<%@ Page Language="C#" Theme="" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title>RadWindow Width Issue Demonstration</title>
	<script type="text/javascript">
	<!--
	function fnOnPopupOpen(oWindow) {
	try {
	//Feel free to set this to false to get rid of the silly random comments I tossed in for humor's sake.
	var blnShowRandomComments=true;
	var intReportedWidth,intActualWidth,intBoundsWidth,arrWindowBounds;
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("fnOnPopupOpen is firing! oWindow is: "+oWindow.get_name()+"; Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("Reported width and actual width weren't similar by default, and neither were bounds width and actual width. Let's set the status bar to something much shorter; maybe that will fix it!");
	oWindow.set_status("Something much shorter!");
	}
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("Still not right. Let's try setting the width of the window after a one-second timeout. Maybe that will fix it!");
	setTimeout(function() {
	oWindow.set_width(530);
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("set_width() complete. Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("Still not right! Let's try setting the size of the window after a one-second timeout.");
	setTimeout(function() {
	oWindow.setSize(530,200);
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("setSize() complete. Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("Still no luck. All right, let's try getting rid of the status bar altogether!");
	oWindow.set_visibleStatusbar(false);
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("set_visibleStatusbar(false) complete. Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("I give up. Help!");
	else alert("Execution complete. Failure.");
	}
	else {
	if (blnShowRandomComments) alert("It worked! Hallelujah! Wait, where's my statusbar?");
	oWindow.set_visibleStatusbar(true);
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("set_visibleStatusbar(true) complete. Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	if (intReportedWidth < intActualWidth && intBoundsWidth < intActualWidth) {
	if (blnShowRandomComments) alert("I give up. Help!");
	else alert("Execution complete. Failure.");
	}
	else {
	if (blnShowRandomComments) alert("It worked! Hallelujah!");
	else alert("Execution complete. Success.");
	}
	}
	}
	else {
	if (blnShowRandomComments) alert("It worked! Hallelujah!");
	else alert("Execution complete. Success.");
	}
	}, 1000);
	}
	else {
	if (blnShowRandomComments) alert("It worked! Hallelujah!");
	else alert("Execution complete. Success.");
	}
	}, 1000);
	}
	else {
	if (blnShowRandomComments) alert("It worked! Hallelujah!");
	else alert("Execution complete. Success.");
	}
	}
	catch (ex) {
	alert("Error occurred: "+ex.message);
	}
	}
	function fnOpenWindow() {
	var strURL="Test.aspx?RandomText=A very long query string which should definitely stretch the width of the window well beyond 530 pixels.";
	var objWindow=radopen(strURL,"DialogWindow");
	}
	function GetRadWindow()
	{
	var oWindow = null;
	if (window.radWindow)
	oWindow = window.radWindow;
	else if (window.frameElement.radWindow)
	oWindow = window.frameElement.radWindow;
	return oWindow;
	}
	function fnClose() {
	var oWindow=GetRadWindow();
	oWindow.close();
	}
	//-->
	</script>
	</head>
	<body>
	<form id="form1" runat="server">
	<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
	</telerik:RadScriptManager>
	<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Default" OnClientPageLoad="fnOnPopupOpen">
	<Windows>
	<telerik:RadWindow ID="DialogWindow" runat="server" Behavior="Move,Resize" Height="200px"
	InitialBehavior="none" Modal="True" ReloadOnShow="true" ShowContentDuringLoad="false"
	Top="200px" Width="530px" KeepInScreenBounds="true" NavigateUrl="Test.aspx?RandomText=Test" />
	</Windows>
	</telerik:RadWindowManager>
	<% if (Request.QueryString["RandomText"] == null)
	{%>
	<p>
	<input type="button" id="B1" value="Open a RadWindow!" onclick="fnOpenWindow()" /></p>
	<%}
	else
	{ %>
	<p>
	<input type="button" id="B2" value="Close this RadWindow!" onclick="fnClose()" /></p>
	<%} %>
	</form>
	</body>
	</html>

[Svetlina Anati]

Hi ADH,

I examined your code and I noticed that in order to obtain a reference to the RadWindow you use the following function:

 function GetRadWindow()
 {
   var oWindow = null;
   if (window.radWindow)
   oWindow = window.radWindow;
   else if (window.frameElement.radWindow)
   oWindow = window.frameElement.radWindow;
   return oWindow;
 }

and this is the correct approach to reference a window from its content page, not from the parent page, which opens it.

The correct way of referencing the RadWindow object in your case is the following one:

function GetRadWindow()
          {
           var oWindow = $find('DialogWindow');
           return oWindow;
          }

I modified your project as described in this and my previous post and I am attaching it here. Please note that in this specific page, the resize takes effect even without setting a timeout, but in you original project it maybe needed, because this depends on the time the RadWindow's ContentPage takes to load.

Let me know if you need further assistance.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[AJtheCoder]

By that logic, this function should do the trick:

	function fnTelerikOnPopupOpen() {
	var oWindow = $find('DialogWindow');
	setTimeout(function() {
	alert("Firing resize!");
	oWindow.setSize(530,200);
	var intReportedWidth,intActualWidth,intBoundsWidth,arrWindowBounds;
	intReportedWidth=oWindow.get_width();
	intActualWidth=oWindow.get_contentFrame().scrollWidth;
	arrWindowBounds=oWindow.getWindowBounds();
	intBoundsWidth=arrWindowBounds.width;
	alert("Resize fired! oWindow is: "+oWindow.get_name()+"; Reported width is: "+intReportedWidth+"; Bounds width is: "+intBoundsWidth+"; Actual width is: "+intActualWidth);
	},1000);
	}

Unfortunately, I have no luck with it. What am I missing?

[AJtheCoder]

Actually, I found an interesting issue with that code. Here's a modified, working version:

	<%@ Page Language="C#" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title>RadWindow Width Issue Demonstration</title>
	<script type="text/javascript">
	<!--
	function fnOnPopupOpen(oWindow) {
	GetRadWindow().setSize(530, 300);
	}
	function fnOpenWindow() {
	var strURL="Default.aspx?RandomText=A very long query string which should definitely stretch the width of the window well beyond 530 pixels.";
	var objWindow=radopen(strURL,"DialogWindow");
	}
	function GetRadWindow()
	{
	var oWindow = $find('DialogWindow');
	return oWindow;
	}
	function GetRadWindowWithinWindow()
	{
	var oWindow = null;
	if (window.radWindow)
	oWindow = window.radWindow;
	else if (window.frameElement.radWindow)
	oWindow = window.frameElement.radWindow;
	return oWindow;
	}
	function fnClose() {
	var oWindow=GetRadWindowWithinWindow();
	oWindow.close();
	}
	//-->
	</script>
	</head>
	<body>
	<form id="form1" runat="server">
	<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
	</telerik:RadScriptManager>
	<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Default" OnClientPageLoad="fnOnPopupOpen">
	<Windows>
	<telerik:RadWindow ID="DialogWindow" runat="server" Behavior="Move,Resize" Height="200px"
	InitialBehavior="none" Modal="True" ReloadOnShow="true" ShowContentDuringLoad="false"
	Top="200px" Width="530px" KeepInScreenBounds="true" NavigateUrl="Default.aspx?RandomText=Test" />
	</Windows>
	</telerik:RadWindowManager>
	<% if (Request.QueryString["RandomText"] == null)
	{%>
	<p>
	<input type="button" id="B1" value="Open a RadWindow!" onclick="fnOpenWindow()" /></p>
	<%}
	else
	{ %>
	<p>
	<input type="button" id="B2" value="Close this RadWindow!" onclick="fnClose()" /></p>
	<%} %>
	</form>
	</body>
	</html>

Steps to reproduce:

1. Click to open the window. It will show up at the proper size.
2. Click the close button and close the window.
3. Click to open the window again. It will expand to include the status bar's text.

Definitely strange!

[AJtheCoder]

Has anyone had any luck with this? It's becoming a problem with my app - windows open fine the first time, but after that, they expand quite a bit.

[Stephane Zanoni]

ADH,

No fix, but the only way I've found to bypass this is to remove the status bar:

oWindow.set_visibleStatusbar(false);

That way, I don't have the resizing issue, setting the timer to-re-re-re-size the window doesn't work.  Doing post-load event isn't a solution it's a worst hack then just removing the status bar.

If you "need" a status bar, then the best bet would be to open a support ticket.  They've always been pretty good for me in the past.

GL.

[Georgi Tunev]

Hi,

The problem with the RadWindow being resized because of a long text in the statusbar is fixed in our internal builds and the fix will appear with Service Pack 1 which is scheduled for next week.

We apologize for the temporary inconvenience.




Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center