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.

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>

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.

A function that is attached to this event is triggered on clicking the RadWindow's toolbar, even if it is already active. 

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%";
			}

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

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.

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