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); }
When a RestrictionZone is used the RadWindows are not positioned correctly in all cases. When the number of windows is low (e.g. below approximately 6) the dimensions set to the RadWindows are not optimal. In some cases not all the available viewport is filled even if the number of popups matches the needed (e.g. 6 instances should be able to cover the viewport, but they cover about 2/3 of its height).
When the input inside RadWindow is focused the on-screen keyboard is shown, the page is scrolled so the input is into view above the keyboard and then the keyboard hides automatically. This is caused by using a RestrictionZone. Remove this property to avoid the behavior.
A function that is attached to this event is triggered on clicking the RadWindow's toolbar, even if it is already active.
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%"; }
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.
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.
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); }
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>
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>
Allow adding buttons near cancel button rather than inside form. Please see attachments.
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); }
Move the dialog after scrolling to the bottom and its content scrolls either a bit, or to the top (depending on the used browser). The scroll position must be preserved and unchanged by the RadWindow control, regardless of the circumstances
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
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>
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(); }