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: ""; }
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); }
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; }
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>
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; };
Allow adding buttons near cancel button rather than inside form. Please see attachments.
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>
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
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); }
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); } } }
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>
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%"; }
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.
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
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>
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);
A custom icon is replaced with the default icon in the LightWeight renderMode. For the time being the custom icon can be forced by using the OnClientShow event of the control: function OnClientShow(sender) { sender.set_iconUrl(sender.get_iconUrl()); }