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

A JavaScript error is thrown when a dialog that has animations enabled is closed if unobtrusive validation is used on the page.

Workarounds are:
- avoid animations
- OR, add the following script at the end of the form and remove it when this issue is fixed internally
Telerik.Web.UI.RadWindow.prototype._hide = function() {
	if (!this.get_animation() || this.get_animation() == 0) {
		this._afterHide();
	} else {
		if (this._enableShadow && $telerik.isIE) {
			this._setShadowCSSClass(false);
		} 
		var fnc = Function.createDelegate(this, this._afterHide),
			isMaximized = this.isMaximized(),
			duration = this.get_animationDuration();
		var popupElem = $telerik.$(this._popupElement);
		if (popupElem.length > 0 && popupElem.stopTransition) {
			$telerik.$(this._popupElement).stopTransition().transition({ opacity: 0 }, duration, "linear", function () {
				fnc(isMaximized);
			});
		} else {
			fnc(isMaximized);
		}
	}
}

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.

In Q3 2013 the script that creates the modal background for our dialogs (e.g., RadAlert, RadConfirm) was improved with the following:
- some issues that allowed focus to get to the background were fixed
- accessKey handling was improved
- an option was added to set the disabled attribute of elements the developer chooses
- tabIndex recognition was improved (the key problem is that if the attribute is not set, no two browsers return the same or proper information)

Since these scripts now do a lot more work, huge pages can experience a slowdown when a modal dialog is shown. For example, a page with about 7000 elements took about 800ms vs about 70ms with the old scripts for the same page.

The performance can be improved by adding the attached script (a minified version of the old code) to the end of the page. You can add it as a script reference, or simply copy it inline, depending on your preferences. Using this script will, however, remove the fixes and improvements done in Q3 2013, as well as any other modifications we make in the future.

If a performance improvement in the scripts is possible, it will speed up the process (probably not all the way to the previous levels) without losing the new functionality.

A possible workaround is to remove the wrong skin-specific CSS class and add the correct one, for example:
<telerik:RadWindow ID="first" runat="server" Skin="Silk" Height="200px" Width="200px" VisibleOnPageLoad="true" RenderMode="Lightweight"
				   OnClientShow="applyProperSkinClass">
	<ContentTemplate>
		<asp:Label runat="server" Text="Silk"></asp:Label>
	</ContentTemplate>
</telerik:RadWindow>
<telerik:RadWindow ID="second" runat="server" Skin="MetroTouch" Height="200px" Width="200px" VisibleOnPageLoad="true" RenderMode="Lightweight"
				   OnClientShow="applyProperSkinClass">
	<ContentTemplate>
		<asp:Label runat="server" Text="MetroTouch"></asp:Label>
	</ContentTemplate>
</telerik:RadWindow>
<script type="text/javascript">
	function applyProperSkinClass(sender, args) {
		var classesArray = $telerik.$(sender.get_popupElement()).attr('class').split(' ');
		for (var i = 0; i < classesArray.length; i++) {
			if (classesArray[i].indexOf("RadWindow_") > -1) {
				$telerik.$(sender.get_popupElement()).removeClass(classesArray[i]);
			}
		}
		$telerik.$(sender.get_popupElement()).addClass("RadWindow_" + sender.get_skin());
		var wndBounds = sender.getWindowBounds();
		sender.setSize(wndBounds.width, wndBounds.height);
	}
</script>

A workaround is to disable animations. You can do this in the control markup/code-behind or JavaScript depending on your case.

In case this is not an option, you can disable the animations prior to closing so that autosizing does not use them:
function CloseAndRebind() {
	GetRadWindow().BrowserWindow.refreshGrid();
	setTimeout(function () {
		var wnd = GetRadWindow();
		wnd.set_animation(0);//disable animations
		wnd.close();
	}, 0);
}

You can find the detailed discussion here http://www.telerik.com/forums/issue-with-radwindow-(2014-2-618-45)

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.

A workaround is to call a function that will increase the z-index when it activates. The attached example shows a workaround.

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>

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.

When a RadAlert or RadConfirm is shown without an image (the last argument to their call is an empty string),the radalert/rwAlertDialog and radconfirm/rwConfirmDialog classes go missing from the control's elements (the pairs are for the Classic and Lightweight render modes respectively).
Since these classes are sometimes used to cascade and apply custom styling to this dialog, their removal may be unwanted.
There are several ways to work around this:

-   keep the image, if suitable for your case (i.e., remove the last argument from the RadAlert() call). For example:
RadWindowManager1.RadAlert(text, 330, 150, "", null);

-   use a blank, transparent image instead of no image. It could be 1 transparent pixel (attached here).

-   place the desired style inline in the template. Here is an example for the Lightweight mode:
<AlertTemplate>
    <div class="rwDialog rwAlertDialog">
        <div class="rwDialogContent">
            <div class="rwDialogMessage" style="font-size: 30px;">
                {1}
            </div>
        </div>
        <div class="rwDialogButtons">
            <input type="button" value="OK" class="rwOkBtn" onclick="$find('{0}').close(true); return false;" />
        </div>
    </div>
</AlertTemplate>

-   change the cascade to also affect the other two types of predefined dialogs. For example
.rwDialogText,
.rwDialogMessage
{
    font-size: 30px;
}

-   use a RadNotification to show the message instead: http://demos.telerik.com/aspnet-ajax/notification/examples/servershowwithnewtext/defaultcs.aspx.

You can find attached three pages that illustrate the problem and mainpage.aspx offers a workaround.
Steps to reproduce, if the workaround is removed:
1) Browse the MainPage.aspx
 2) Click the "Show RadWindow 1" button
 3) In the first RadWindow, click the "Show RadWindow 2" to open the child modal RadWindow (Content Page 2)
   -- if you click the "Show Current Active Window" button in content page 1, you can see the current active window is  the "Content Page 1" which is correct.
 4) Maximize the second RadWindow and close it
 5) Back in the first RadWindow, click the "Show Current Active Window" button, the current active window will host the "Content Page 2" and will have the ID of the second dialog

When the RenderMode of the RadWindowManager is set to "Auto", the embedded dialogs of the RadWindowManager do not have their resources loaded. For the time being the  RenderMode  must be set either to Classic or to Lightweight.

The content of the RadWindows overflows the available area when the control is used in LightWeight render mode in IE. Also the width of the window is increased with 14px.

image - http://screencast.com/t/vQqM9jLRy6uy

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>

The problem with adding such an overlay is that it cannot be transparent, or it will not work. If it is added, the content of the main page will be invisible behind a modal popup. It can be implemented via an additional property (that will default to false) should the effect be acceptable to the developer. Add a vote and/or a comment in favor or against such an option.

A possible solution is setting the visibility CSS attribute of the embedded elements to hidden with a JavaScript function attached to the OnClientBeforeShow event of the RadWindow, and reverting it to its initial value with the OnClientClose hander. To ease these elements' collection they are going to use the shouldBeDisabled CSS class for this example:

function OnClientBeforeShow(sender, args) {
	if (sender.isModal())
	{
		var elements = $telerik.$(".shouldBeDisabled");
		var arrLength = elements.length;
		var element;

		for (var i = 0; i < arrLength; i+=1) {
			element = elements[i];
			element.style.visibility = "hidden";
		}
	}
}

function OnClientClose(sender, args) {
	if (sender.isModal()) {
		var elements = $telerik.$(".shouldBeDisabled");
		var arrLength = elements.length;
		var element;

		for (var i = 0; i < arrLength; i += 1) {
			element = elements[i];
			element.style.visibility = "initial";
		}
	}
}

When a RestrictionZone is used, under Chrome for iOS7, the first time an input inside a RadWindow is tapped it cannot get focus. This means that its onfocus event does not fire and the user cannot type in it even though the keyboard was shown.
When another input is focused things start working properly.
A way to avoid this is to remove the RestrictionZone property.
You can also remove the restriction zone for mobile devices to include chrome
		function OnClientShow(sender, args)
		{
			if ($telerik.isTouchDevice)
			{
				sender.set_restrictionZoneID("");
			}
		}

Currently when external content is loaded in RadWindow, scollbars appear in the content and the control is dragged, the position of the scrollbars will be reset in IE10.
The attached sample demonstrates a workaround for this issue.