Currently a page loaded through HTTPS will throw a warning that unsecure content is loaded if the IconUrl of the RadWindow is set with a relative path. This happens because the framework sets the URL without regard for the protocol. A workaround is to always use full urls (e.g. https://mysite.com/images/myIcon.jpg).

If possible, RadWindow should check the protocol and fix the URL so that such warnings are not shown.

Admin update: You can follow this article and the sample it provides to create an adaptive RadWindow https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow and you can also tweak the provided code through the rich client-side API of the control so it matches your concrete requirements.



RadWindow is one of the controls we use a lot in our applications. As our applications get more and more optimized to be used on smartphones and tablets, we tried to redo some of our functionality or replace them with RadLightboxes or other ways. But the RadLightbox lacks a lot of the functionality the RadWindow has: windowmanager, dialogs, more focussed on regular web-page content,.... 

I have been waiting for adaptive RadWindow functionality for quite some time, and I really hope I'm not the only one! Today I've read your Q1 2015 road map and I decided to finally post this feature request here too (I contacted your support team about this a few weeks ago).

It's easy to dynamically create windows using the windowmanager, pass data between them, show dialogs, etc... 
It would be very nice to be able to still have all this functionality, but with added adaptive behavior.

If the viewport width is too small to display the window or dialog in a correct way, the window/dialog would need to open maximized immediately without restricting height/width.

It would be nice to keep the title-bar and the close functionality on top, but I really don't need to move, minimize, maximize, pin,... the window on a smartphone, only be able to view its contents, interact with the content and close the window if needed. A bit like your lightbox does, but less focused on images/galleries and more flexible using the managers and the existing API these windows already have.

This would of course need to work for windows with url's (iframe), contenttemplates, and dialogs too. 

I like the Bootstrap modal-window, for example. If your windows/dialogs could behave a bit more like that on mobile devices, but would keep the functionality of the window-manager, adding iframe-content, dialogs, I would be more than happy!

Thanks
Nick

The idea is to let a simple property have the RadWindow close on outside click like the RadLightBox: http://demos.telerik.com/aspnet-ajax/lightbox/examples/overview/defaultcs.aspx.

At the moment, a few lines of code are needed and you can find examples here: http://www.telerik.com/forums/close-modal-on-overlay-click#DGbE7tSl3kWR926gm99m9A.

In recent versions of Chrome (76.0.38...) we are experiencing an issue when we display a popup using ShowContentDuringLoad="false". The content goes out of bounds of the window. When that flag is true, the window displays as expected. I tried this using Telerik version 2019.2.514.45.



We've been using Telerik controls for some time and I am aware of the minimum frame height limit imposed by the browser but in this case it does not matter if the window height is 200px or 400px, we are still seeing the same issue.


We are using classic mode for Telerik controls.
 

See the attached zip for an example project and also a screenshot of what we are seeing.

If I remove the height from the frame in pageLoad() in javascript it displays OK.

oWindow.GetContentFrame().style.height = ""

 
I can't seem to override using a CSS style, I think the window is using what is stored in cssText.

oWindow.GetContentFrame().style.cssText = "width: 100%; height: 100%; border: 0px; position: absolute; top: -10000px;"


Can you please investigate and fix in Chrome. I would also like to see if you can provide a CSS style work around.

I've tried all sorts of style overrides and cannot seem to find one that works. It looks like whatever is specified in cssText is

what is used for the height.

 
Thanks for your help,

If the content page has a title RadWindow should set it for its own title, unless its Title property has been set explicitly.

Since Q2 2013, when ShowContentDuringLoad=true (which is the default value) this does not happen.

The second workaround is using the OnClientPageLoad event:
			function OnClientPageLoad(sender)
			{
				try
				{
					var pageTitle = sender.get_contentFrame().contentWindow.document.title;
					sender.set_title(sender.get_title() == "" ? pageTitle : sender.get_title());
				}
				catch (err)
				{

				}
			}
The try-catch block is used to catch errors in case the page is from another domain and the JavaScript same-origin policy is in effect.

The event handler can also be attached to the RadWindow manager so that it will be used for all its RadWindows.

There are several ways to work around this:
1) disable autosizing (set AutoSize to false)
2) move the RadWindow after autoziging finishes (see attached example for a demo):
			function OnClientAutoSizeEnd(sender, args)
			{
				var wndBounds = sender.getWindowBounds();
				//this is the case when the viewport is not sufficient for the RadWindow
				//so the RadWindow is as tall as the viewport
				if (wndBounds.height == $telerik.getClientBounds().height)
				{
					sender.moveTo(wndBounds.x - 9);
				}
			}

3) avoid autosizing for the subsequent page loads in the content page.
This can be done by setting AutoSize to false and additionally the following function attached to the OnClientPageLoad event will provide autosizing for the first load without positioning issues:
 			function OnClientPageLoad(sender, args)
			{
				if (!sender.hasBeenShown)
				{
					sender.autoSize(false);
					sender.hasBeenShown = true;
				}
			}

4)  use partial postbacks in the content page so that it is not fully reloaded and the autosizing logic is not fired again automatically.

If you have multiple RadWindows opened only one has an active state (brigter colors for one). Closing it should activate the next one, so it is visually distinguishable, like MS Windows does. This should be the dialog that was either last opened, or was the last one active.
With Lightweight RenderMode this does not happen and the other dialog remains in its inactive state.

You can use the OnClientClose event to invoke the logic that activates the previous one:
			<telerik:RadWindow ID="MainWindow" runat="server" Modal="true" VisibleOnPageLoad="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight">
				<ContentTemplate>
					<telerik:RadButton ID="radbtnOpenWin" runat="server" Text="Open Window" AutoPostBack="false"
									   OnClientClicked="OpenWindow">
					</telerik:RadButton>
				</ContentTemplate>
			</telerik:RadWindow>
			<telerik:RadWindow ID="ChildWindow" runat="server" Modal="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight">
				<ContentTemplate>
					Child Window
				</ContentTemplate>
			</telerik:RadWindow>
			<script type="text/javascript">
				function activatePreviousWindow(sender, args) {
					setTimeout(function () {
						sender._getWindowController().notifyWindowClosed(sender);
					});
				}
				
				function OpenWindow(sender, args) {
					var window = $find("<%=ChildWindow.ClientID%>");
					window.show();
				}
			</script>

Thus, users can scroll down and see the content of the page behind maximized window.
Workaround for iOS and Android:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientCommand="OnClientCommand" />

<style>
        html, body {
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
    </style>
    <script type="text/javascript">
        var currentDialog = null;

        function OnClientCommand(sender, eventArgs) {
            var commandName = eventArgs.get_commandName();

            if ($telerik.isTouchDevice) {
                if (commandName == "Maximize") {
                    document.body.style.position = 'fixed';
                    setTimeout(function () {
                        document.body.style.overflow = 'visible';
                    }, 100)

                }
                else if (commandName != "Pin") {
                    document.body.style.position = 'static';
                }
            }

            if ($telerik.isMobileSafari) {
                if (commandName == "Maximize") {
                    window.onscroll = centerDialog;
                    currentDialog = sender;
                }
                else if (commandName != "Pin") {
                    window.onscroll = null;
                    currentDialog = null;
                }
            }
        }

        function centerDialog() {
            if (currentDialog && currentDialog.center) {
                currentDialog.center();
            }
        }
    </script>

Based on customer report: scrollbar of RadWindow disappears after moving the window. Producible on our demos -- http://demos.telerik.com/aspnet-ajax/window/examples/minmaxsize/defaultcs.aspx.

Note: Chrome specific bug: https://bugs.chromium.org/p/chromium/issues/detail?id=641881

Error message: Unable to get property '_handlesCollection' of undefined or null reference
when RenderMode=Lightweight

Workarounds:
- enable the default behaviors to enable the Resize (and thus- maximize0 functionality, restore behaviors later:
				function OpenForm(sender, args) {
					var oWnd = radopen(null, "existing");
					var currBehaviors = oWnd.get_behaviors();
					oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Default);
					if (!oWnd.isMaximized()) {
						oWnd.maximize();
					}
					oWnd.set_behaviors(currBehaviors);
					
				}
- OR, have the Behaviors property contain either of the Maximize or Resize behavior. Or use the Default value

			<telerik:RadWindowManager runat="server" ID="rwm1">
				<Windows>
					<telerik:RadWindow runat="server" ID="existing" Behaviors="Close, Resize">
					</telerik:RadWindow>
				</Windows>
			</telerik:RadWindowManager>

			<telerik:RadButton ID="Button5" Text="open existing rw from rwm 3" AutoPostBack="false" OnClientClicked="OpenForm" runat="server"></telerik:RadButton>

			<script>
				function OpenForm(sender, args) {
					var oWnd = radopen(null, "existing");
					
					
				}
				function OnClientShow(sender, args) {
					if (!sender.isMaximized()) {
						sender.maximize();
					}
				}
			</script>

When the input inside RadWindow is focused the on-screen keyboard is shown, the page is scrolled so the input is into view above the keyboard and then the keyboard hides automatically. This is caused by using a RestrictionZone. Remove this property to avoid the behavior.

The WAI-ARIA specification indicates that there are alert, alertdialog and dialog roles, the appropriate one must be applied to the RadWindow dialogs.
http://www.w3.org/TR/wai-aria/roles#alert
http://www.w3.org/TR/wai-aria/roles#alertdialog
http://www.w3.org/TR/wai-aria/roles#dialog

In the meantime, you can use a script like this to apply the role:
        <script type="text/javascript">
            function OnClientShow(sender, args) {
                var role = "dialog";
                 if (sender._isPredefined) { //this captures RadAlert, RadConfirm and RadPrompt
                   role = "alertdialog"; 
                }
                //this will be executed for all child RadWIndows from that manager so you can apply a different role (e.g., dialog)
               sender.get_popupElement().setAttribute("role", role);
            }
        </script>

        <telerik:RadWindowManager runat="server" ID="RadWindowManager1" EnableAriaSupport="true" OnClientShow="OnClientShow"></telerik:RadWindowManager>


Note: Testing with the JAWS screen reader indicates that it does not recognize dynamically created HTML, and all RadWindow dialogs are created dynamically with JavaScript. This is a shortcoming of the reader.

At present, RadWindows do not have a z-index during animations so they may get hidden behind other elements on the page.
The animation should be performed with the final z-index being already set to the RadWindow's popup element.

There are two possible workarounds:

- use RenderMode=Classic
- OR, add a CSS class to the dialog and a simple CSS rule to remove the built-in font icon:
			div.withCustomIcon .rwIcon:before
			{
				content: "";
			}

			<telerik:RadWindow ID="RadWindow1" runat="server" CssClass="withCustomIcon" IconUrl="~/images/icon_16x16.png" VisibleOnPageLoad="true" RenderMode="Lightweight"></telerik:RadWindow>

There are three possible workarounds until an official fix is available

- use RenderMode=Classic


- add a check for the object fields in the handler, in every handler

			function theCloseEventsHandler(sender, args) {
				var arg = args.get_argument();
				if (arg.target && arg.which) { //it is the mouse event
					arg = null;
				}
				alert(arg);
			}


- add the check by overriding the built-in function of the dialog. Place the following script at the end of the page that hosts the RadWindows:

			var oldClose = Telerik.Web.UI.RadWindow.prototype.close;
			Telerik.Web.UI.RadWindow.prototype.close = function (arguments) {
				if (arguments.target && arguments.which) { //it is the mouse event
					arguments = null;
				}
				var _oldClose = Function.createDelegate(this, oldClose);
				_oldClose(arguments);
			}

This is related to a browser bug in accessing the document.activeElement property inside an iframe under IE9 and IE10.

See this KB article for additional information and examples: http://www.telerik.com/support/kb/aspnet-ajax/window/modal-radwindow-in-radwindow-in-ie9-and-ie10.aspx .

There are several possible workarounds:
1) remove the Modal feature.
2) Replace the opening logic with the one from this thread ( http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx ) and add a small timeout before showing the RadWindow. Even 0ms could suffice so the browser has an active element
3) Replace the RadAjaxPanel with an ASP UpdatePanel with UpdateMode set to Conditional
4) Add a function that will provide a focused element and call it in the OnClientBeforeShow event of the RadWindow
5) Add that function and call it in the ResponseScripts of the RadAjaxPanel
 The function could look like this: function fixIE() { document.documentElement.focus();} where, of course, you can focus some other element on the page.

A sample is attached.

Currently the video does not play, only audio is heard. If autosizing is disabled the video functions properly.
A possible workaround is to disable autosizing and manually call the autosize() method when the page is loaded for all other browsers:

<telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true" NavigateUrl="PlayVideo.aspx"
    AutoSize="false" Width="700" Height="500" OnClientPageLoad="OnClientPageLoad">
</telerik:RadWindow>

 and

function OnClientPageLoad(sender, args)
{
    setTimeout(function ()
    {
        if (!$telerik.isMobileSafari)
        {
            sender.autoSize(false);
        }
    }, 0);
}

Possible workarounds:
1) the following CSS rule:
		.rwExternalContent iframe
		{
			height: 100%;
		}

OR

2) some JavaScript attached to the OnClientPageLoad event of the control:
			function OnClientPageLoad(sender)
			{
				sender.get_contentFrame().style.height = "100%";
			}

With the classic render mode this allows the developer to always position the popup according to a given target with a given offset.
With the lightweight render mode the current bounds are returned instead of the offsets set by the developer.

The following example always shows a RadWindow according to its offset element instead of only the first time:
						oWindow = $find("<%=winTest2.ClientID%>");
						oWindow.show();
						if (oWindow.get_offsetElementID())
						{
							offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
							oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top());
						}
This will not work as expected with the Lightweight render mode, because the popup will move additionally with its width and height.