Last Updated: 29 Sep 2014 12:30 by ADMIN
Created by: Marin Bratanov
Comments: 1
Category: Window
Type: Bug Report
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.

If possible, RadWindow should check the protocol and fix the URL so that such warnings are not shown.
Last Updated: 13 Oct 2014 14:25 by ADMIN
Last Updated: 16 Sep 2019 13:59 by ADMIN
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,
Last Updated: 05 Jul 2013 12:52 by ADMIN
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)
					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.
Last Updated: 28 Aug 2014 11:33 by ADMIN
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">
					<telerik:RadButton ID="radbtnOpenWin" runat="server" Text="Open Window" AutoPostBack="false"
			<telerik:RadWindow ID="ChildWindow" runat="server" Modal="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight">
					Child Window
			<script type="text/javascript">
				function activatePreviousWindow(sender, args) {
					setTimeout(function () {
				function OpenWindow(sender, args) {
					var window = $find("<%=ChildWindow.ClientID%>");;
Last Updated: 23 Nov 2015 10:52 by ADMIN
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.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.
Last Updated: 06 Mar 2017 14:34 by ADMIN
Error message: Unable to get property '_handlesCollection' of undefined or null reference
when RenderMode=Lightweight

- 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();
					if (!oWnd.isMaximized()) {
- OR, have the Behaviors property contain either of the Maximize or Resize behavior. Or use the Default value

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

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

				function OpenForm(sender, args) {
					var oWnd = radopen(null, "existing");
				function OnClientShow(sender, args) {
					if (!sender.isMaximized()) {
Last Updated: 28 Mar 2016 07:22 by ADMIN
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.
Last Updated: 08 Sep 2015 07:43 by ADMIN
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.
Last Updated: 22 Oct 2015 06:07 by ADMIN
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>
Last Updated: 20 Oct 2015 09:46 by ADMIN
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.which) { //it is the mouse event
					arg = null;

- 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.which) { //it is the mouse event
					arguments = null;
				var _oldClose = Function.createDelegate(this, oldClose);
Last Updated: 16 Sep 2013 09:52 by ADMIN
A function that is attached to this event is triggered on clicking the RadWindow's toolbar, even if it is already active. 
Last Updated: 05 Mar 2014 09:57 by ADMIN
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.
Last Updated: 24 Jul 2013 07:58 by ADMIN
Possible workarounds:
1) the following CSS rule:
		.rwExternalContent iframe
			height: 100%;


2) some JavaScript attached to the OnClientPageLoad event of the control:
			function OnClientPageLoad(sender)
				sender.get_contentFrame().style.height = "100%";
Last Updated: 17 Nov 2015 09:08 by ADMIN
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) :
                result.x = constraints.maxX !== null && !isNaN(constraints.maxX) ?
                    Math.min(delta.x, constraints.maxX - position.x - elementWidth) :
            if (delta.y < 0)
                result.y = constraints.minY !== null && !isNaN(constraints.minY) ?
                    Math.max(delta.y, constraints.minY - position.y) :
                result.y = constraints.maxY !== null && !isNaN(constraints.maxY) ?
                    Math.min(delta.y, constraints.maxY - position.y - elementHeight) :
            return result;
Last Updated: 20 Apr 2015 08:46 by Elena
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 -
Last Updated: 29 Jul 2015 06:55 by ADMIN
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>
			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.container = wnd._popupElement = container; = "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");


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

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

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

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



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

				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(); = name;
					/*jshint scripturl:true*/
					frame.src = "javascript:'<html></html>';"; = "100%"; = "100%"; = "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) = "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');
						//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 {

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

					//Create a back reference to parent RadWindow

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

					if (wnd.isBehaviorEnabled(Telerik.Web.UI.WindowBehaviors.Resize))


				if (!$telerik.isTouchDevice) //fix various issues with the control when hardware acceleration is enabled with CSS
				{["Transform"] = "none";["BackfaceVisibility"] = "visible";["webkitTransform"] = "none";["webkitBackfaceVisibility"] = "visible";["OTransform"] = "none";["OBackfaceVisibility"] = "visible";["MozTransform"] = "none";["MozBackfaceVisibility"] = "visible";["msTransform"] = "none";["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!
					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);

Last Updated: 26 Feb 2015 08:58 by Frank
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) {
	} else {
		if (this._enableShadow && $telerik.isIE) {
		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 () {
		} else {
Last Updated: 17 Feb 2015 14:38 by ADMIN
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"
		<asp:Label runat="server" Text="Silk"></asp:Label>
<telerik:RadWindow ID="second" runat="server" Skin="MetroTouch" Height="200px" Width="200px" VisibleOnPageLoad="true" RenderMode="Lightweight"
		<asp:Label runat="server" Text="MetroTouch"></asp:Label>
<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()).addClass("RadWindow_" + sender.get_skin());
		var wndBounds = sender.getWindowBounds();
		sender.setSize(wndBounds.width, wndBounds.height);
Last Updated: 12 Mar 2016 15:20 by ADMIN
For the time being you can use the following CSS workaround:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		html .RadWindow_Bootstrap.rwLoading .rwExternalContent {
			background-image: url('	<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadWindow), "Telerik.Web.UI.Skins.Bootstrap.Common.loading.gif") %>')
1 2 3 4