Completed
Last Updated: 28 Jun 2016 10:39 by ADMIN
Created by: luc bonenfant
Comments: 1
Category: Window
Type: Feature Request
1
Allow adding buttons near cancel button rather than inside form. Please see attachments.
Completed
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>
		<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>
Won't Fix
Last Updated: 07 Dec 2015 12:55 by ADMIN
When the Lightweight render mode is enabled and you set large text in any of the dialogs of RadWindow, part of the text appears outside of the window.

You can workaround this issue by overriding the styles of the dialogs. Below you can check a possible approach for RadAlert:
    <style type="text/css">
        div.RadWindow {
            overflow: auto;
            height: auto !important;
        }

        .rwDialogMessage {
            padding-bottom: 30px;
        }
    </style>
Approved
Last Updated: 24 Jun 2015 11:27 by ADMIN
The following CSS will override the built-in rules to improve the icons positioning:

            div.RadWindow_Glow .rwTable .rwTitlebarControls .rwIcon
            {
                margin: 3px 5px 0 0;
            }

            div.RadWindow_Silk .rwTable .rwTitlebarControls .rwIcon
            {
                margin: 2px 5px 0 0;
            }

            div.RadWindow_Bootstrap .rwTable .rwTitlebarControls .rwIcon
            {
                margin: 6px 5px 0 0;
            }
Won't Fix
Last Updated: 07 Jan 2016 14:07 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: Window
Type: Bug Report
1
As a workaround you can manually display the loading panel as per this KB - http://www.telerik.com/support/kb/aspnet-ajax/window/details/custom-loading-sign-for-radwindow
Completed
Last Updated: 09 Nov 2015 12:45 by ADMIN
There are two workarounds:
- set the EnableShadow property in the markup
- OR, for Lightweight RenderMode, add a CSS class:

<telerik:RadWindow ID="RadWindow_MyInfo" runat="server" RenderMode="Lightweight"></telerik:RadWindow>
<asp:Button ID="Button1" Text="show wnd" OnClientClick="test(); return false;" runat="server" />
<script>
	function test() {
		var myinfo = $find('<%=RadWindow_MyInfo.ClientID%>');
		myinfo.setUrl("../Dialogs/MyInfo.aspx");
		myinfo.set_enableShadow(true);
		myinfo.show();
		$telerik.$(myinfo.get_popupElement()).addClass("rwShadow");
	}
</script>
Completed
Last Updated: 11 Jan 2016 08:28 by ADMIN
According to client reports, having an ID set to the HTML element that holds the text of the predefined dialogs improves the way JAWS handles them. Here is a small example that shows how you can do that:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientShow="OnClientShow"></telerik:RadWindowManager>
<script>
	function OnClientShow(sender, args) {
		if (sender._isPredefined) {
			var dialogId = sender.get_id();
			var textContainer = $telerik.$(".rwDialogText", sender.get_contentElement());
                        //for the Lightweight RenderMode, use the ".rwDialogMessage" selector
			var textConainerIdPrefix = "dialogContent_";
			textContainer.attr("id", textConainerIdPrefix + dialogId);
		}
	}
	function pageLoad() {
		radalert("a warning");
		radconfirm("a confirmation");
		radprompt("a prompt");
	}
</script>
Approved
Last Updated: 29 Jul 2016 14:09 by ADMIN
At present, when a RadWindow is pinned, it still uses position: absolute and an interval is initiated to recalculate its position every 100ms. This causes it to visibly "jump" when the user scrolls the page because of the interval update in its location.

Instead, position: fixed should be used to avoid the position calculation on an interval.
Completed
Last Updated: 29 Nov 2017 11:48 by ADMIN
The easiest workaround is to remove the overlay (e.g., set the Overlay property to false or call the set_overlay(false) client-side method). In most cases an overlay is not needed, as it is used only for showing the popup over heavyweight objects like PDFs, Flash or Java applets: http://www.telerik.com/support/kb/aspnet-ajax/window/details/control-is-shown-behind-a-heavy-weight-object-(pdf-flash-activex-etc)
Completed
Last Updated: 29 Nov 2017 15:41 by ADMIN
You can work around this by storing the currently focused element before calling autoSize()
and then using the OnClientAutoSizeEnd event (http://www.telerik.com/help/aspnet-ajax/window-client-side-events-onclientautosizeend.html) to restore the focus.

//this goes in the content
function autoSizeWnd() {
	//code that manipulates the content so autosizing is needed
	var oWnd = getRadWindow();
	if ($telerik.isIE) { //assumes you have the Telerik core client-side libraries loaded (e.g., by having a Telerik control on this page). If you don't, you can skip the check or add them manually
		oWnd.__currActElem = document.activeElement;
	}
	oWnd.autoSize();
}


//this goes in the main page where the RadWindow is declared
function autoSizeEndHandler(sender, args) {
	setTimeout(function () {
		if (sender.__currActElem && sender.__currActElem.focus) {
			sender.__currActElem.focus();
		}
	}, 0);
}
Completed
Last Updated: 26 Jun 2018 11:09 by ADMIN
Created by: Informat
Comments: 5
Category: Window
Type: Feature Request
13
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
Completed
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) {
		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);
		}
	}
}
Completed
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.
Completed
Last Updated: 29 Jul 2016 08:59 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Window
Type: Feature Request
0
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.
Completed
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"
				   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>
Completed
Last Updated: 11 May 2015 10:37 by ADMIN
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)
Completed
Last Updated: 21 Nov 2017 09:49 by ADMIN
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.
Won't Fix
Last Updated: 18 Oct 2016 11:25 by ADMIN
The ContentTemplate is designed as a container for server controls, so you would need to declare and use a RadWindow with a ContenTemplate (even blank) for this to work as expected. The ContentTemplate element is not created upon client-side setting at this point, so having a content that is not where it is supposed to be may break the control afterwards (e.g., if autosizing is used).

A workaround is to create a dummy content template that can alleviate most issues:
var wnd = radopen(null, wndName);

//create an imitation of the ContentTemplate
if (!wnd.___customContentElemCreated) {
$telerik.$("iframe", wnd.get_popupElement()).remove();

var cElem = document.createElement("div");
cElem.setAttribute("id", wnd.get_id() + "_C");
cElem.style.display = "";
cElem.style.overflow = "auto";
cElem.style.border = "0px";
wnd.set_contentElement(cElem);
wnd.setWidthDockMode(wnd.get_width());
wnd.setHeightDockMode(wnd.get_height());

wnd.___customContentElemCreated = true;
}

wnd,set_contentElement(theNewElem);
Completed
Last Updated: 16 Dec 2016 11:49 by ADMIN
A workaround is to call a function that will increase the z-index when it activates. The attached example shows a workaround.
Completed
Last Updated: 06 Aug 2015 14:03 by ADMIN
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>