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.
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.
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>
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.target && arg.which) { //it is the mouse event arg = null; } alert(arg); } - 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.target && arguments.which) { //it is the mouse event arguments = null; } var _oldClose = Function.createDelegate(this, oldClose); _oldClose(arguments); }
The Classic RenderMode hides all iframes on the page when the user starts moving or resizing the RadWindow. This prevents them from consuming the mouse events and thus ensures proper behavior, but hides content from the user which is unexpected. You can find attached below an illustration of the issue. Due to numerous requests about changing this, the Lightweight mode does not hide the iframes. Thus in some cases, if the browser had not redrawn the RadWindow fast enough, the mouse events may get captured by another iframe. Cast your vote whether you want the Lightweight mode to do this as well. You can change this by using the following script (the second instance has the necessary handlers attached, in a real app you can do that via the RadWindowManager, or via an ASP Theme) <telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true" NavigateUrl="Default2.aspx" RenderMode="Lightweight"></telerik:RadWindow> <telerik:RadWindow runat="server" ID="rw2" VisibleOnPageLoad="true" NavigateUrl="Default3.aspx" RenderMode="Lightweight" OnClientDragStart="hideFrames" OnClientResizeStart="hideFrames" OnClientDragEnd="showFrames" OnClientResizeEnd="showFrames"> </telerik:RadWindow> <script> function hideFrames(sender, args) { setIframesVisible(false, sender); } function showFrames(sender, args) { setIframesVisible(true, sender); } function setIframesVisible(bVisible, wnd) { var iframes = document.getElementsByTagName("iframe"); var iframeToSkip = wnd.get_contentFrame(); for (var i = 0, length = iframes.length; i < length; i++) { var frame = iframes[i]; if (iframeToSkip && (iframeToSkip === frame || iframeToSkip == frame))//compare through == and === because of FF 3.5 and 3.6 iframeToSkip = null; else { frame.style.visibility = bVisible ? "" : "hidden"; //For some extremely strange reason in IE the iframe does not get hidden properly and continues to consume mouse events if ($telerik.isIE) try { frame.contentWindow.document.body.style.visibility = bVisible ? "" : "hidden"; } catch (ex) { } } } } </script>
This is related to a browser bug in accessing the document.activeElement property inside an iframe under IE9 and IE10. See this KB article for additional information and examples: http://www.telerik.com/support/kb/aspnet-ajax/window/modal-radwindow-in-radwindow-in-ie9-and-ie10.aspx . There are several possible workarounds: 1) remove the Modal feature. 2) Replace the opening logic with the one from this thread ( http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx ) and add a small timeout before showing the RadWindow. Even 0ms could suffice so the browser has an active element 3) Replace the RadAjaxPanel with an ASP UpdatePanel with UpdateMode set to Conditional 4) Add a function that will provide a focused element and call it in the OnClientBeforeShow event of the RadWindow 5) Add that function and call it in the ResponseScripts of the RadAjaxPanel The function could look like this: function fixIE() { document.documentElement.focus();} where, of course, you can focus some other element on the page. A sample is attached.
Currently the video does not play, only audio is heard. If autosizing is disabled the video functions properly. A possible workaround is to disable autosizing and manually call the autosize() method when the page is loaded for all other browsers: <telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true" NavigateUrl="PlayVideo.aspx" AutoSize="false" Width="700" Height="500" OnClientPageLoad="OnClientPageLoad"> </telerik:RadWindow> and function OnClientPageLoad(sender, args) { setTimeout(function () { if (!$telerik.isMobileSafari) { sender.autoSize(false); } }, 0); }
Currently setSize() works for popups that are already shown. If setSize() is called before show() (or radopen() or open() from a RadWindowManager) the new size will not be respected on subsequent iterations.
After added this code window close button stop working. if we remove these three properties it works fine oWnd.SetWidth(width); oWnd.SetHeight(height); oWnd.center(); function openWin(url) { var oWnd = radopen(url, "RadWindow22"); oWnd.SetWidth(width); oWnd.SetHeight(height); oWnd.center(); }
Possible workarounds: 1) the following CSS rule: .rwExternalContent iframe { height: 100%; } OR 2) some JavaScript attached to the OnClientPageLoad event of the control: function OnClientPageLoad(sender) { sender.get_contentFrame().style.height = "100%"; }
With the classic render mode this allows the developer to always position the popup according to a given target with a given offset. With the lightweight render mode the current bounds are returned instead of the offsets set by the developer. The following example always shows a RadWindow according to its offset element instead of only the first time: oWindow = $find("<%=winTest2.ClientID%>"); oWindow.show(); if (oWindow.get_offsetElementID()) { offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID())); oWindow.moveTo(offsetElementBounds.x + oWindow.get_left(), offsetElementBounds.y + oWindow.get_top()); } This will not work as expected with the Lightweight render mode, because the popup will move additionally with its width and height.
When the following RadWindow's propertis are set - AutoSize="true and RenderMode="Lightweight", the title's width of the RadWindow is 1px. The workaround is to use either RenderMode="Classic" or to override the title's width: <style type="text/css"> h6.rwTitle { width: 60% !important; } </style>
It should be similar to the RadAjaxManager.GetCurrent(Page) method and return the first RadWindowManager instance on the page. Note that, unlike most other manager type controls there may be multiple RadWindowManagers on the page in a valid scenario.
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>
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 - http://screencast.com/t/vQqM9jLRy6uy
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.
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>
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); } } }
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); }