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.

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

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>

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>

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>

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);
			}

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>

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.

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.

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.

Here is a script override that can help:

Telerik.Web.UI.Widgets.Draggable.prototype._calcConstraints = function (delta, position, constraints)
        {
            var $ = $telerik.$;
 
            var result = delta;
            //CHANGED THIS **********************************************************************************************************
            //Otherwise window can't be moved all the way to the right or bottom of screen
            //var elementWidth = this._element.offsetWidth;
            //var elementHeight = this._element.offsetHeight;
            var elementWidth = $(this._element).width();
            var elementHeight = $(this._element).height();
            //**********************************************************************************************************************
             
            if ((constraints.maxX != null && position.x + elementWidth > constraints.maxX) ||
                (constraints.minX != null && position.x < constraints.minX) ||
                (constraints.maxY != null && position.y + elementHeight > constraints.maxY) ||
                (constraints.minY != null && position.y < constraints.minY)
                )
                return { x: 0, y: 0 };
 
            if (delta.x < 0)
                result.x = constraints.minX !== null && !isNaN(constraints.minX) ?
                    Math.max(delta.x, constraints.minX - position.x) :
                    delta.x;
            else
                result.x = constraints.maxX !== null && !isNaN(constraints.maxX) ?
                    Math.min(delta.x, constraints.maxX - position.x - elementWidth) :
                    delta.x;
 
            if (delta.y < 0)
                result.y = constraints.minY !== null && !isNaN(constraints.minY) ?
                    Math.max(delta.y, constraints.minY - position.y) :
                    delta.y;
            else
                result.y = constraints.maxY !== null && !isNaN(constraints.maxY) ?
                    Math.min(delta.y, constraints.maxY - position.y - elementHeight) :
                    delta.y;
 
            return result;
        };

For the time being you can use the following CSS workaround:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<style>
		html .RadWindow_Bootstrap.rwLoading .rwExternalContent {
			background-image: url('	<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadWindow), "Telerik.Web.UI.Skins.Bootstrap.Common.loading.gif") %>')
		}
	</style>
	</telerik:RadCodeBlock>

Allow adding buttons near cancel button rather than inside form. Please see attachments.

For the time being you can use the following workaround:

		<telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="telerik_new-logo_thumb.png" VisibleOnPageLoad="true" RenderMode="Lightweight"></telerik:RadWindow>
		<script>
			var $W = Telerik.Web.UI.Window;
			$W.LightweightRenderer.prototype.createUI = function () {
				if (this.container) return;
				var wnd = this.window;
				var isRtl = wnd._isWindowRightToLeft();
				var addCssClass = Sys.UI.DomElement.addCssClass;

				var container = document.createElement("div");
				this._appendToDom(container);
				this.container = wnd._popupElement = container;
				container.id = "RadWindowWrapper_" + wnd.get_id();

				container.className = this._getSkinCssClass();
				var customCssClass = wnd.get_cssClass();
				if (customCssClass)
					addCssClass(container, customCssClass);
				if (isRtl)
					addCssClass(container, "rwRtl");
				if (!wnd._visibleTitlebar)
					addCssClass(container, "rwNoTitleBar");

				this.setShadowCssClass(wnd._enableShadow);

				container.setAttribute("unselectable", "on");

				var containerStyle = container.style;
				containerStyle.width = wnd._width;
				containerStyle.height = wnd._height;
				containerStyle.position = "absolute";

				var titlebar = this.titlebar = wnd._titlebarElement = document.createElement("div");
				titlebar.className = "rwTitleBar";
				container.appendChild(titlebar);

				var titleWrap = document.createElement("div");
				titleWrap.className = "rwTitleWrapper";
				titlebar.appendChild(titleWrap);

				titleWrap.appendChild(this.getIconNode());
				titleWrap.appendChild(this.getTitleNode());
				wnd.set_title(wnd._title);
				titleWrap.appendChild(this.getTitleCommandsContainer());

				wnd._registerTitlebarHandlers(true);
				wnd.set_iconUrl(wnd.get_iconUrl());

				var content = this.content = $get(wnd.get_id() + "_C") || this.pendingContent || document.createElement("div");
				if (content) {
					content.style.display = "none";
					content.className = "rwContent";
					this.setContent(content);
				}

				if (!wnd._dockMode) {
					var contentFrames = content.getElementsByTagName("iframe");
					//Create content IFRAME. Due to a bug in IE regarding setting the name attribute, the following ugly code needs to be used
					var frame = contentFrames.length > 0 ?
									contentFrames[0] :
									document.createElement(($telerik.isIE && !$telerik.isIE9Mode) ? "<iframe name='" + name + "'>" : "iframe");

					var name = this.window.get_name();

					frame.name = name;
					/*jshint scripturl:true*/
					frame.src = "javascript:'<html></html>';";
					frame.style.width = "100%";
					frame.style.height = "100%";
					frame.style.border = "0px"; //set to 0
					frame.frameBorder = "0";

					//Only under IE8 it is necessary to set display = "block" for the IFRAME - otherwise it will not occupy 100% of its parent element
					if ($telerik.isIE8)
						frame.style.display = "block";

					this.contentFrame = wnd._iframe = frame;

					//FIX for IFRAME overflowing outside the RadWindow under mobile device
					if (($telerik.isMobileSafari || wnd._isiPhoneiPadAppleWebkit) && !wnd._isPredefined) {
						var iframeWrapper = document.createElement('div');
						$(iframeWrapper).addClass('rwIframeWrapperIOS');
						iframeWrapper.appendChild(this.contentFrame);
						this.content.appendChild(iframeWrapper);
						//in iOS5 having a wrapper with only overflow hidden does not resolve the frame height problem
						//we need to have explicit pixel height for that wrapper as well !!!
						if (wnd._isiOS5Safari) wnd.setContentFixedHeight(wnd.get_height(), iframeWrapper);
						wnd._iframeWrapper = iframeWrapper;
					} else {
						this.content.appendChild(this.contentFrame);
					}

					Sys.UI.DomElement.addCssClass(this.content, "rwExternalContent");

					//Create a back reference to parent RadWindow
					wnd._createBackReference();
				}

				if (wnd._visibleStatusbar) {
					var statusbar = this.statusbar = document.createElement("div");
					statusbar.className = "rwStatusBar";
					container.appendChild(statusbar);

					statusbar.appendChild(this.getStatusMessageNode());
					if (wnd.isBehaviorEnabled(Telerik.Web.UI.WindowBehaviors.Resize))
						statusbar.appendChild(this.createStatusbarResizer());
				}


				wnd._addWindowToDocument();

				if (!$telerik.isTouchDevice) //fix various issues with the control when hardware acceleration is enabled with CSS
				{
					this.container.style["Transform"] = "none";
					this.container.style["BackfaceVisibility"] = "visible";
					this.container.style["webkitTransform"] = "none";
					this.container.style["webkitBackfaceVisibility"] = "visible";
					this.container.style["OTransform"] = "none";
					this.container.style["OBackfaceVisibility"] = "visible";
					this.container.style["MozTransform"] = "none";
					this.container.style["MozBackfaceVisibility"] = "visible";
					this.container.style["msTransform"] = "none";
					this.container.style["msBackfaceVisibility"] = "visible";
				}

				//Create the popup if it has not been created
				if (!wnd._popupBehavior) {
					//Set behaviors (move, resize,etc etc) - do it here, so that the IFRAME is created and can be passed to be skipped
					//should be done only once!
					wnd.set_behaviors(wnd._behaviors);
					this.popupBehavior = wnd._popupBehavior = $create(Telerik.Web.PopupBehavior, {
						'id': ((new Date() - 100) + 'PopupBehavior'),
						'parentElement': null, 'overlay': wnd._overlay, 'keepInScreenBounds': wnd._keepInScreenBounds
					}, null, null, this.container);
				}

			};
		</script>