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 a RadAlert or RadConfirm is shown without an image (the last argument to their call is an empty string),the radalert/rwAlertDialog and radconfirm/rwConfirmDialog classes go missing from the control's elements (the pairs are for the Classic and Lightweight render modes respectively). Since these classes are sometimes used to cascade and apply custom styling to this dialog, their removal may be unwanted. There are several ways to work around this: - keep the image, if suitable for your case (i.e., remove the last argument from the RadAlert() call). For example: RadWindowManager1.RadAlert(text, 330, 150, "", null); - use a blank, transparent image instead of no image. It could be 1 transparent pixel (attached here). - place the desired style inline in the template. Here is an example for the Lightweight mode: <AlertTemplate> <div class="rwDialog rwAlertDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage" style="font-size: 30px;"> {1} </div> </div> <div class="rwDialogButtons"> <input type="button" value="OK" class="rwOkBtn" onclick="$find('{0}').close(true); return false;" /> </div> </div> </AlertTemplate> - change the cascade to also affect the other two types of predefined dialogs. For example .rwDialogText, .rwDialogMessage { font-size: 30px; } - use a RadNotification to show the message instead: http://demos.telerik.com/aspnet-ajax/notification/examples/servershowwithnewtext/defaultcs.aspx.
A workaround is to call a function that will increase the z-index when it activates. The attached example shows a workaround.
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)
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)
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>
A simple workaround is to add the needed border via CSS: .RadWindow.rwNoTitleBar { padding-top: 0.5em; }
This causes some empty space to remain at the bottom of the dialog. Possible workarounds are: - set the VIsibleStatusbar property of the RadWIndowManager to false, if all your RadWindows need no statusbar; or at least to the concrete instance. - OR, use the following script that will improve hiding the status bar element and resizing the content: oWnd = window.radopen(pageURL, winName); //will work for classic rendermode oWnd.set_visibleStatusbar(false); //will work for lightweight. In classic jQuery will not throw exceptions because of the element it cannot find $telerik.$(".rwStatusBar", oWnd.get_popupElement()).hide(); var contentElem = $telerik.$(".rwContent.rwExternalContent", oWnd.get_popupElement()); contentElem.height(contentElem.height() + 20);
To get the RadWindow to center properly, you need to use its OnClientAutoSizeEnd event and call its center() method: This issue affects only the Q1 2016 SP1 release. <script> function OnClientAutoSizeEnd(sender, args) { sender.center(); } </script> <telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="Button1" AutoSize="true" Modal="true" OnClientAutoSizeEnd="OnClientAutoSizeEnd"> <ContentTemplate> <div style="width: 600px; height: 400px; background: yellow;">dummy content for autosizing</div> </ContentTemplate> </telerik:RadWindow> <asp:Button ID="Button1" Text="open RW" runat="server" />
The issue does not manifest with iOS9 or the Classic RenderMode
The control RadWindow render his element with incorrect names of css classes: like he rendered rwTitleBar instead of rwTitlebar, and rwStatusBar instead of rwStatusbar this bug is produced only when i use a custom theme. please if you have a solution bring that.
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>
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; }
FF 52 and Chrome58 seem to have started reading some CSS from 2010 differently. This affects controls such as RadMenu, RadTreeView, RadPanelBar, RadEditor, RadListBox, RadTabStrip that are in the ContentTemplate of a RadWindow. The issue can manifest as bad element alignment or extra padding. Internal fix will be available as of R2 2017. There are two workarounds: - use the Lightweight Render Mode (helps in some cases) - add a CSS override similar to the following /* FireFox 52+ and Chrome 58+ */ html:first-child .RadWindowFixed ul { float: none !important; } <telerik:RadWindow ID="RadWindow2" runat="server" Title="Rad Window with RadTreeView - Fixed" Width="400px" MinWidth="230px" MaxWidth="600px" CssClass="RadWindowFixed" Height="610px" VisibleOnPageLoad="true" Behaviors="Minimize, Move, Maximize, Resize" VisibleStatusbar="false" KeepInScreenBounds="true" Left="406">
Workaround Telerik.Web.UI.RadWindow.prototype.set_restrictionZoneID = function(value) { this._restrictionZoneID = value; if (value && this.isCreated()) { this.fitInRestrictionZone(); } }
/*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; }
A workaround is to call the _updateTitleWidth() method in the OnClientAutoSize event. A small sample is attached below.