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; };
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); }
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>
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);
I needed this event because I wanted to implement custom logic at end of animation. I am trying to auto-size the standard dialogs when animation is enabled. Right now, the code library that I submitted for auto-sizing standard dialogs works only if there is no animation. I feel providing an AnimationCompleted event on client-side would provide more power to the developer and finer control on customizing the RadWindow when its animated.
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>
When the Lightweight render mode is enabled and you set large text in any of the dialogs of RadWindow, part of the text appears outside of the window. You can workaround this issue by overriding the styles of the dialogs. Below you can check a possible approach for RadAlert: <style type="text/css"> div.RadWindow { overflow: auto; height: auto !important; } .rwDialogMessage { padding-bottom: 30px; } </style>
The following CSS will override the built-in rules to improve the icons positioning: div.RadWindow_Glow .rwTable .rwTitlebarControls .rwIcon { margin: 3px 5px 0 0; } div.RadWindow_Silk .rwTable .rwTitlebarControls .rwIcon { margin: 2px 5px 0 0; } div.RadWindow_Bootstrap .rwTable .rwTitlebarControls .rwIcon { margin: 6px 5px 0 0; }
A simple workaround is to add the needed border via CSS: .RadWindow.rwNoTitleBar { padding-top: 0.5em; }
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
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
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>
According to client reports, having an ID set to the HTML element that holds the text of the predefined dialogs improves the way JAWS handles them. Here is a small example that shows how you can do that: <telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientShow="OnClientShow"></telerik:RadWindowManager> <script> function OnClientShow(sender, args) { if (sender._isPredefined) { var dialogId = sender.get_id(); var textContainer = $telerik.$(".rwDialogText", sender.get_contentElement()); //for the Lightweight RenderMode, use the ".rwDialogMessage" selector var textConainerIdPrefix = "dialogContent_"; textContainer.attr("id", textConainerIdPrefix + dialogId); } } function pageLoad() { radalert("a warning"); radconfirm("a confirmation"); radprompt("a prompt"); } </script>
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.
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)
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); }
Admin update: You can follow this article and the sample it provides to create an adaptive RadWindow https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow and you can also tweak the provided code through the rich client-side API of the control so it matches your concrete requirements. RadWindow is one of the controls we use a lot in our applications. As our applications get more and more optimized to be used on smartphones and tablets, we tried to redo some of our functionality or replace them with RadLightboxes or other ways. But the RadLightbox lacks a lot of the functionality the RadWindow has: windowmanager, dialogs, more focussed on regular web-page content,.... I have been waiting for adaptive RadWindow functionality for quite some time, and I really hope I'm not the only one! Today I've read your Q1 2015 road map and I decided to finally post this feature request here too (I contacted your support team about this a few weeks ago). It's easy to dynamically create windows using the windowmanager, pass data between them, show dialogs, etc... It would be very nice to be able to still have all this functionality, but with added adaptive behavior. If the viewport width is too small to display the window or dialog in a correct way, the window/dialog would need to open maximized immediately without restricting height/width. It would be nice to keep the title-bar and the close functionality on top, but I really don't need to move, minimize, maximize, pin,... the window on a smartphone, only be able to view its contents, interact with the content and close the window if needed. A bit like your lightbox does, but less focused on images/galleries and more flexible using the managers and the existing API these windows already have. This would of course need to work for windows with url's (iframe), contenttemplates, and dialogs too. I like the Bootstrap modal-window, for example. If your windows/dialogs could behave a bit more like that on mobile devices, but would keep the functionality of the window-manager, adding iframe-content, dialogs, I would be more than happy! Thanks Nick
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); } } }