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.
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>
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
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.
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>
Allow adding buttons near cancel button rather than inside form. Please see attachments.
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; }
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.
RadWindow is not displayed in mobile Chrome for iPad. A workaround is to set the Request Desktop Site Google Chrome option and the RadWindow should be available.
A sample page that shows how you can implement such functionality is attached.
In Q3 2013 the script that creates the modal background for our dialogs (e.g., RadAlert, RadConfirm) was improved with the following: - some issues that allowed focus to get to the background were fixed - accessKey handling was improved - an option was added to set the disabled attribute of elements the developer chooses - tabIndex recognition was improved (the key problem is that if the attribute is not set, no two browsers return the same or proper information) Since these scripts now do a lot more work, huge pages can experience a slowdown when a modal dialog is shown. For example, a page with about 7000 elements took about 800ms vs about 70ms with the old scripts for the same page. The performance can be improved by adding the attached script (a minified version of the old code) to the end of the page. You can add it as a script reference, or simply copy it inline, depending on your preferences. Using this script will, however, remove the fixes and improvements done in Q3 2013, as well as any other modifications we make in the future. If a performance improvement in the scripts is possible, it will speed up the process (probably not all the way to the previous levels) without losing the new functionality.
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>