Scenario description and workaround follow. Note the comments in the workaround and test before using, because it introduces some other unwanted behaviors, mostly related to the bottom/right edge of the zone. WORKAROUND 1: <div id="zone" style="width: 600px; height: 500px; background: yellow;"></div> <telerik:RadWindow runat="server" ID="rw1" RenderMode="Lightweight" VisibleOnPageLoad="true" Left="0" Top="0" RestrictionZoneID="zone"></telerik:RadWindow> <script> Telerik.Web.UI.Window.LightweightView.prototype._resizingHandler = function(resizable, args){ $telerik.cancelRawEvent(args.get_domEvent()); var edges = this.restrictBounds, bounds = this._getResizeBounds(args), borders = this.resizeHelper.borders, fullBounds = { x: bounds.x - borders.left,//originally, subtract y: bounds.y - borders.top,//originally, subtract width: bounds.width + borders.horizontal, height: bounds.height + borders.vertical}; //debugger //console.log(fullBounds); //changing the direction in which borders are counted above (+ or -) changes the behavior and the potential issues //if you subtract from the position, resizing will not be available next to the top/left border of the restriction zone //if you add to the position, resizing will be available but the user can resize in the direction of the zone bounds and thus, out of the bounds of the zone, so dragging may become unavailable //also, this will make resizing worse when the window touches the right or bottom of the zone var inContainer = this.window._checkRestrictionZoneBounds(edges, fullBounds); bounds.width = Math.max(resizable.options.constraints.minWidth, bounds.width); bounds.height = Math.max(resizable.options.constraints.minHeight, bounds.height); args.set_cancel(true); if(inContainer && this.touchCount++ > 0) { var style = this.ui.container.style; style.left = bounds.x + "px"; style.top = bounds.y + "px"; this._setWidth(bounds.width); this._setHeight(bounds.height); this._currentResizeBounds = bounds; } } </script> WORKAROUND 2: Add this to the resizeEnd and dragEnd events of the RadWindow to try and have it never touch the sides of the restriction zone at all. function keepThisWindowInBounds(sender) { if (!sender.isMinimized() && !sender.isMaximized()) { var position = sender.getWindowBounds(); var rzRect = document.getElementById(sender._restrictionZoneID).getBoundingClientRect(); // note rzRect height and width are both 1px bigger than the rzElement clientWidth and clientHeight // check width and height if (position.width > rzRect.width - 3) { position.width = rzRect.width - 3; sender.set_width(position.width); } if (position.height > rzRect.height - 3) { position.height = rzRect.height - 3; sender.set_height(position.height); } var needToMove = false; if (position.x < 1) { needToMove = true; position.x = 1; } else if (position.x > rzRect.width - position.width - 2) { needToMove = true; position.x = rzRect.width - position.width - 2; } if (position.y < 1) { needToMove = true; position.y = 1; } else if (position.y > rzRect.height - position.height - 2) { needToMove = true; position.y = rzRect.height - position.height - 2; } if (needToMove) sender.moveTo(position.x, position.y); } }
A function that is attached to this event is triggered on clicking the RadWindow's toolbar, even if it is already active.
Workaround in OnClientBeforeClose (commented):
<telerik:RadWindowManager RenderMode="Lightweight" OnClientClose="OnClientClose"
OnClientBeforeClose="OnClientBeforeClose" Behaviors="Close, Move, Resize,Maximize"
ID="RadWindowManager" runat="server" Width="450" Height="400">
<Windows>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" VisibleOnPageLoad="true"
Title="Wikipedia" _NavigateUrl="http://www.wikipedia.org" IconUrl="wikiFavicon.ico" runat="server">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script type="text/javascript">
function OnClientBeforeClose(oWnd, args) {
//workaround:
//oWnd.get_popupElement().style.visibility = "hidden";
}
function OnClientClose(oWnd) {
debugger;
}
</script>
The IE iframe module crashes, most likely because of the fact that events do not bubble to iframes.
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);
The manually set height of RadWindow is not persisted after PostBack if the control's ShowContentDuringLoad property is set to False. The issue is reproducible in IE9. Video: http://screencast.com/t/ChvvBVzst Workaround: Set ShowContentDuringLoad="true" when the current browser is IE: <button onclick="OpenRadWindow();return false;" class="Button" style="width: 190px"> Show popup window</button> <script type="text/javascript"> function OpenRadWindow() { var oManager = GetRadWindowManager(); oWind = oManager.getWindowByName("RadWindow1"); //workaround if ($telerik.isIE) oWind.add_pageLoad(pageLoaded); oWind.show(); } function pageLoaded(oWind) { oWind.set_showContentDuringLoad(true); } </script>
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
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>