Currently a page loaded through HTTPS will throw a warning that unsecure content is loaded if the IconUrl of the RadWindow is set with a relative path. This happens because the framework sets the URL without regard for the protocol. A workaround is to always use full urls (e.g. https://mysite.com/images/myIcon.jpg). If possible, RadWindow should check the protocol and fix the URL so that such warnings are not shown.
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
The idea is to let a simple property have the RadWindow close on outside click like the RadLightBox: http://demos.telerik.com/aspnet-ajax/lightbox/examples/overview/defaultcs.aspx. At the moment, a few lines of code are needed and you can find examples here: http://www.telerik.com/forums/close-modal-on-overlay-click#DGbE7tSl3kWR926gm99m9A.
If the content page has a title RadWindow should set it for its own title, unless its Title property has been set explicitly. Since Q2 2013, when ShowContentDuringLoad=true (which is the default value) this does not happen. The second workaround is using the OnClientPageLoad event: function OnClientPageLoad(sender) { try { var pageTitle = sender.get_contentFrame().contentWindow.document.title; sender.set_title(sender.get_title() == "" ? pageTitle : sender.get_title()); } catch (err) { } } The try-catch block is used to catch errors in case the page is from another domain and the JavaScript same-origin policy is in effect. The event handler can also be attached to the RadWindow manager so that it will be used for all its RadWindows.
There are several ways to work around this: 1) disable autosizing (set AutoSize to false) 2) move the RadWindow after autoziging finishes (see attached example for a demo): function OnClientAutoSizeEnd(sender, args) { var wndBounds = sender.getWindowBounds(); //this is the case when the viewport is not sufficient for the RadWindow //so the RadWindow is as tall as the viewport if (wndBounds.height == $telerik.getClientBounds().height) { sender.moveTo(wndBounds.x - 9); } } 3) avoid autosizing for the subsequent page loads in the content page. This can be done by setting AutoSize to false and additionally the following function attached to the OnClientPageLoad event will provide autosizing for the first load without positioning issues: function OnClientPageLoad(sender, args) { if (!sender.hasBeenShown) { sender.autoSize(false); sender.hasBeenShown = true; } } 4) use partial postbacks in the content page so that it is not fully reloaded and the autosizing logic is not fired again automatically.
Thus, users can scroll down and see the content of the page behind maximized window. Workaround for iOS and Android: <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientCommand="OnClientCommand" /> <style> html, body { margin: 0px; padding: 0px; border: 0px; } </style> <script type="text/javascript"> var currentDialog = null; function OnClientCommand(sender, eventArgs) { var commandName = eventArgs.get_commandName(); if ($telerik.isTouchDevice) { if (commandName == "Maximize") { document.body.style.position = 'fixed'; setTimeout(function () { document.body.style.overflow = 'visible'; }, 100) } else if (commandName != "Pin") { document.body.style.position = 'static'; } } if ($telerik.isMobileSafari) { if (commandName == "Maximize") { window.onscroll = centerDialog; currentDialog = sender; } else if (commandName != "Pin") { window.onscroll = null; currentDialog = null; } } } function centerDialog() { if (currentDialog && currentDialog.center) { currentDialog.center(); } } </script>
Error message: Unable to get property '_handlesCollection' of undefined or null reference when RenderMode=Lightweight Workarounds: - enable the default behaviors to enable the Resize (and thus- maximize0 functionality, restore behaviors later: function OpenForm(sender, args) { var oWnd = radopen(null, "existing"); var currBehaviors = oWnd.get_behaviors(); oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Default); if (!oWnd.isMaximized()) { oWnd.maximize(); } oWnd.set_behaviors(currBehaviors); } - OR, have the Behaviors property contain either of the Maximize or Resize behavior. Or use the Default value <telerik:RadWindowManager runat="server" ID="rwm1"> <Windows> <telerik:RadWindow runat="server" ID="existing" Behaviors="Close, Resize"> </telerik:RadWindow> </Windows> </telerik:RadWindowManager> <telerik:RadButton ID="Button5" Text="open existing rw from rwm 3" AutoPostBack="false" OnClientClicked="OpenForm" runat="server"></telerik:RadButton> <script> function OpenForm(sender, args) { var oWnd = radopen(null, "existing"); } function OnClientShow(sender, args) { if (!sender.isMaximized()) { sender.maximize(); } } </script>
If you have multiple RadWindows opened only one has an active state (brigter colors for one). Closing it should activate the next one, so it is visually distinguishable, like MS Windows does. This should be the dialog that was either last opened, or was the last one active. With Lightweight RenderMode this does not happen and the other dialog remains in its inactive state. You can use the OnClientClose event to invoke the logic that activates the previous one: <telerik:RadWindow ID="MainWindow" runat="server" Modal="true" VisibleOnPageLoad="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight"> <ContentTemplate> <telerik:RadButton ID="radbtnOpenWin" runat="server" Text="Open Window" AutoPostBack="false" OnClientClicked="OpenWindow"> </telerik:RadButton> </ContentTemplate> </telerik:RadWindow> <telerik:RadWindow ID="ChildWindow" runat="server" Modal="true" OnClientClose="activatePreviousWindow" RenderMode="Lightweight"> <ContentTemplate> Child Window </ContentTemplate> </telerik:RadWindow> <script type="text/javascript"> function activatePreviousWindow(sender, args) { setTimeout(function () { sender._getWindowController().notifyWindowClosed(sender); }); } function OpenWindow(sender, args) { var window = $find("<%=ChildWindow.ClientID%>"); window.show(); } </script>
Based on customer report: scrollbar of RadWindow disappears after moving the window. Producible on our demos -- http://demos.telerik.com/aspnet-ajax/window/examples/minmaxsize/defaultcs.aspx. Note: Chrome specific bug: https://bugs.chromium.org/p/chromium/issues/detail?id=641881
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.
The WAI-ARIA specification indicates that there are alert, alertdialog and dialog roles, the appropriate one must be applied to the RadWindow dialogs. http://www.w3.org/TR/wai-aria/roles#alert http://www.w3.org/TR/wai-aria/roles#alertdialog http://www.w3.org/TR/wai-aria/roles#dialog In the meantime, you can use a script like this to apply the role: <script type="text/javascript"> function OnClientShow(sender, args) { var role = "dialog"; if (sender._isPredefined) { //this captures RadAlert, RadConfirm and RadPrompt role = "alertdialog"; } //this will be executed for all child RadWIndows from that manager so you can apply a different role (e.g., dialog) sender.get_popupElement().setAttribute("role", role); } </script> <telerik:RadWindowManager runat="server" ID="RadWindowManager1" EnableAriaSupport="true" OnClientShow="OnClientShow"></telerik:RadWindowManager> Note: Testing with the JAWS screen reader indicates that it does not recognize dynamically created HTML, and all RadWindow dialogs are created dynamically with JavaScript. This is a shortcoming of the reader.
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); }
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.
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>
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.
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); }