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); }
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)
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.
When I set RadWindow property VisibleTitlebar="false" then top border is missing on window. Here is sample code: <telerik:RadWindow runat="server" ID="GenerateReportWaitWindow" Width="440px" Height="200px" VisibleTitlebar="false" Modal="true" ReloadOnShow="false" VisibleStatusbar="false" VisibleOnPageLoad="false" EnableShadow="false" Animation="Fade" Behaviors="None" Title="Čakajte prosím..."> <ContentTemplate> <div style="min-height: 66%;"> <div style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-weight: bold;"> <asp:Label ID="Label4" runat="server">Prebieha vytváranie tlačovej zostavy. Čakajte prosím.</asp:Label> <asp:Label ID="Label5" runat="server">(V závislosti od počtu záznamov to môže trvať aj niekoľko minút...)</asp:Label> <asp:Label ID="Label6" runat="server" ForeColor="Red" Style="display: none;"></asp:Label> </div> <div style="margin-left: auto; margin-right: auto; text-align: center;"> <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Animated/loading1.gif" /> </div> </div> </ContentTemplate> </telerik:RadWindow> Admin comment: Actually there is 1px top border, but it is hard to be noticed. As a temporary solution, one can increase it via the following padding: Copy Code <style> .RadWindow { padding: 4px 5px 5px !important; } </style>
The wrapper of the RadAlert/Confirm/Prompt buttons is wider than the dialog itself in Material skin, in IE/Chrome: https://www.screencast.com/t/4IatOUgMp Steps to reproduce: 1. Open in Chrome: http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx?skin=Material 2. Click on any of the demo buttons (e.g. RadAlert from Client) Result: The wrapper of the Dialog buttons is wider than the dialog itself
A workaround is to call the _updateTitleWidth() method in the OnClientAutoSize event. A small sample is attached below.
/*lightweight mode*/ .RadWindow_Metro div.rwTitleBar, .RadWindow_MetroTouch div.rwTitleBar { background-color: #25a0da; } /*if you want to remove the sides padding*/ /*.RadWindow.RadWindow_Metro, .RadWindow.RadWindow_MetroTouch { padding-left: 0px; padding-right: 0px; padding-bottom: 0px; }*/ /* if you want all the borders blue */ /*div.RadWindow_Metro, div.RadWindow_MetroTouch { border-color: #25a0da; background-color: #25a0da; }*/ /* when Classic form decorator is prsent it adds a white border and changes the font size of h6 elements, avoid that for the Lightweight Radwindow if you cannot move to a Lightweight form decorator as well*/ div.RadWindow h6.rwTitle { border-bottom: none; font-size: inherit; }
To remove the built-in icon for the Lightweight mode, add the following CSS rules to your page: div.rwDialog.rwAlertDialog:before { content: ""; } div.rwDialog.rwConfirmDialog:before { content: ""; }
Most notable issues - Metro skin does not show the correct (blue) color. For a timeline and status updates for the Lightweight mode follow https://feedback.telerik.com/Project/108/Feedback/Details/216601-wrong-titlebar-colors-in-metro-and-metrotouch-skins-in-lightweight-rendermode - RTL mode does not order the buttons properly Workarounds for both: /*lightweight mode*/ .RadWindow_Metro div.rwTitleBar, .RadWindow_MetroTouch div.rwTitleBar { background-color: #25a0da; } /* if you want all the borders blue */ div.RadWindow_Metro, div.RadWindow_MetroTouch { border-color: #25a0da; background-color: #25a0da; } .rwRtl .rwCommands li.rwListItem { float: right; } /* classic mode- metro skin color issue*/ div.RadWindow_Metro .rwTitleRow { background-color: #25a0da; }
This is caused by <button> elements without a type attribute. Workarounds are - add a JS function like this Sys.Application.add_load(function () { // Add the "type=button" attribute to the RadWindow buttons so they don't try to submit the form. $("div.rwDialogButtons button").attr("type", "button"); }); - OR, override the templates and add the attribute: <asp:TextBox ID="Textbox1" runat="server" /> <telerik:RadWindowManager ID="rwm1" runat="server" RenderMode="Lightweight"> <AlertTemplate> <div class="rwDialog rwAlertDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(true); return false;">##LOC[OK]##</button> </div> </div> </AlertTemplate> <PromptTemplate> <div class="rwDialog rwPromptDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> <div class="rwPromptInputContainer"> <script type="text/javascript"> function RadWindowprompt_detectenter(id, ev, input) { if (!ev) ev = window.event; if (ev.keyCode == 13) { var but = input.parentNode.parentNode.parentNode.getElementsByTagName("button")[0]; if (but) { if (but.click) { but.click(); } else if (but.onclick) { but.focus(); var click = but.onclick; but.onclick = null; if (click) click.call(but); } } return false; } else return true; } </script> <input title="Enter Value" onkeydown="return RadWindowprompt_detectenter('{0}', event, this);" type="text" class="rwPromptInput radPreventDecorate" value="{2}" /> </div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(this.parentNode.parentNode.getElementsByTagName('input')[0].value); return false;">##LOC[OK]##</button> <button type="button" class="rwCancelBtn" onclick="$find('{0}').close(null); return false;">##LOC[Cancel]##</button> </div> </div> </PromptTemplate> <ConfirmTemplate> <div class="rwDialog rwConfirmDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(true); return false;">##LOC[OK]##</button> <button type="button" class="rwCancelBtn" onclick="$find('{0}').close(false); return false;">##LOC[Cancel]##</button> </div> </div> </ConfirmTemplate> </telerik:RadWindowManager>
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); } }
Workaround Telerik.Web.UI.RadWindow.prototype.set_restrictionZoneID = function(value) { this._restrictionZoneID = value; if (value && this.isCreated()) { this.fitInRestrictionZone(); } }
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>
The IE iframe module crashes, most likely because of the fact that events do not bubble to iframes.
A workaround is to call a function that will increase the z-index when it activates. The attached example shows a workaround.
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);
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 you create a dynamic tooltip that loads its content from a service (http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx), its height is 100% while the loading takes place. You can workaround this issue by configuring a small initial height for the tooltip (for example 50px), then using the following script to change its height according to the loaded content: <telerik:RadToolTipManager runat="server" OnClientResponseEnd="onClientResponseEnd" Height="50px" > ... </telerik:RadToolTipManager> <script> function onClientResponseEnd() { var current = Telerik.Web.UI.RadToolTip.getCurrent(); if (current) { var height = $telerik.getBounds(current.get_contentElement()).height; current.set_height(height); } } </script>
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>