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>
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); }
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
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.
Here is a script override that can help: Telerik.Web.UI.Widgets.Draggable.prototype._calcConstraints = function (delta, position, constraints) { var $ = $telerik.$; var result = delta; //CHANGED THIS ********************************************************************************************************** //Otherwise window can't be moved all the way to the right or bottom of screen //var elementWidth = this._element.offsetWidth; //var elementHeight = this._element.offsetHeight; var elementWidth = $(this._element).width(); var elementHeight = $(this._element).height(); //********************************************************************************************************************** if ((constraints.maxX != null && position.x + elementWidth > constraints.maxX) || (constraints.minX != null && position.x < constraints.minX) || (constraints.maxY != null && position.y + elementHeight > constraints.maxY) || (constraints.minY != null && position.y < constraints.minY) ) return { x: 0, y: 0 }; if (delta.x < 0) result.x = constraints.minX !== null && !isNaN(constraints.minX) ? Math.max(delta.x, constraints.minX - position.x) : delta.x; else result.x = constraints.maxX !== null && !isNaN(constraints.maxX) ? Math.min(delta.x, constraints.maxX - position.x - elementWidth) : delta.x; if (delta.y < 0) result.y = constraints.minY !== null && !isNaN(constraints.minY) ? Math.max(delta.y, constraints.minY - position.y) : delta.y; else result.y = constraints.maxY !== null && !isNaN(constraints.maxY) ? Math.min(delta.y, constraints.maxY - position.y - elementHeight) : delta.y; return result; };
For the time being you can use the following CSS workaround: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <style> html .RadWindow_Bootstrap.rwLoading .rwExternalContent { background-image: url(' <%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadWindow), "Telerik.Web.UI.Skins.Bootstrap.Common.loading.gif") %>') } </style> </telerik:RadCodeBlock>
I'd like to send JSON (or string) object to RadWindow to be able to populate its content with this object. Similar to Value RadNotification property: public string Value { get; set; } Code snippet below illustrates what I'd like to achieve. function showWindow(jsonObject) { var windowManager = GetRadWindowManager(); if (windowManager) { var window = windowManager.getWindowByName("RadWindow1"); if (window != null) { window.DynamicContent = jsonObject; //Set content window.show(); } } return; } function RadWindow1_Show(sender, args) { var jsonObject = sender.DynamicContent; if (jsonObject != null) { var selector = null; selector = 'span[id*="Content"]'; var domElements = $telerik.$(selector); if (domElements != null && domElements.length > 0) { var spanId = domElements.attr('id'); var span = $get(spanId); if (span != null) span.innerHTML = message; } } return; }
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: ""; }
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>
Each time a window is re-opened its size is decreased with several pixels. video: https://www.screencast.com/t/kxVyE0U2 Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx 2. Close and re-open RadWindow multiple times Result: The window's height is decreased each time. Recommended Workaround: Apply the following CSS class to the page with RadWindow (*** Updated on 22 Jan 2018 ***) <style> .RadWindow { padding: 0 6px 6px !important; } </style> Optional Workaround: Manually resize the Window at the stage of opening it. This example is re-using the width and height set in the markup. JavaScript <script> function openFixedSize(sender, args) { var oWindow = radopen("WindowContent.aspx", "RadWindow1"); oWindow.__oWidth = oWindow.__oWidth ? oWindow.__oWidth : oWindow.get_width(); oWindow.__oHeight = oWindow.__oHeight ? oWindow.__oHeight : oWindow.get_height(); oWindow.setSize(oWindow.__oWidth, oWindow.__oHeight); } </script> Markup <telerik:RadButton ID="RadButton1" runat="server" Text="Open - Custom" AutoPostBack="false" OnClientClicked="openFixedSize"></telerik:RadButton> <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server"> <Windows> <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Title="" Height="500px" Width="500px" Left="1px" Top="1px" ReloadOnShow="true" ShowContentDuringLoad="false" Behaviors="None" Modal="true" ShowOnTopWhenMaximized="True" VisibleStatusbar="False" VisibleTitlebar="false"> </telerik:RadWindow> </Windows> </telerik:RadWindowManager>
Add role="button" to the anchor tags in RadAlert, RadConfirm, RadPrompt that generate the OK buttons and other buttons on these popups for 508 compliance. Currently the buttons are being announced as Links (in NVDA). Workaround is to use a line of JS/Jquery to add the role to the anchor tag.
When using DOCTYPE //W3C//DTD XHTML 1.0 Strict//EN and setting height to 100px RadWindow AutoResize=True gives problems in IE10 by adding unnecessary scrollbars, and in Chrome, FF and Safari the window is to high (approx. 55px too much). Refers to forum entry: http://www.telerik.com/community/forums/aspnet-ajax/window/autosize-behavior-question.aspx (I used the same sample project to replicate the problem). Please see attached screenshot and project.
Instead, the dimensions the popup will have when restored are returned. This is so because a maximized RadWindow will resize with the browser. A possible workaround is using the Telerik Static Client Library: http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html var wnd = $find("RadWindow1"); wnd.maximize(); var bounds = $telerik.getBounds(wnd.get_popupElement()); alert(bounds.width);