A sample page that shows how you can implement such functionality is attached.
You can find attached three pages that illustrate the problem and mainpage.aspx offers a workaround. Steps to reproduce, if the workaround is removed: 1) Browse the MainPage.aspx 2) Click the "Show RadWindow 1" button 3) In the first RadWindow, click the "Show RadWindow 2" to open the child modal RadWindow (Content Page 2) -- if you click the "Show Current Active Window" button in content page 1, you can see the current active window is the "Content Page 1" which is correct. 4) Maximize the second RadWindow and close it 5) Back in the first RadWindow, click the "Show Current Active Window" button, the current active window will host the "Content Page 2" and will have the ID of the second dialog
When a RadAlert or RadConfirm is shown without an image (the last argument to their call is an empty string),the radalert/rwAlertDialog and radconfirm/rwConfirmDialog classes go missing from the control's elements (the pairs are for the Classic and Lightweight render modes respectively). Since these classes are sometimes used to cascade and apply custom styling to this dialog, their removal may be unwanted. There are several ways to work around this: - keep the image, if suitable for your case (i.e., remove the last argument from the RadAlert() call). For example: RadWindowManager1.RadAlert(text, 330, 150, "", null); - use a blank, transparent image instead of no image. It could be 1 transparent pixel (attached here). - place the desired style inline in the template. Here is an example for the Lightweight mode: <AlertTemplate> <div class="rwDialog rwAlertDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage" style="font-size: 30px;"> {1} </div> </div> <div class="rwDialogButtons"> <input type="button" value="OK" class="rwOkBtn" onclick="$find('{0}').close(true); return false;" /> </div> </div> </AlertTemplate> - change the cascade to also affect the other two types of predefined dialogs. For example .rwDialogText, .rwDialogMessage { font-size: 30px; } - use a RadNotification to show the message instead: http://demos.telerik.com/aspnet-ajax/notification/examples/servershowwithnewtext/defaultcs.aspx.
A workaround is to call a function that will increase the z-index when it activates. The attached example shows a workaround.
The ContentTemplate is designed as a container for server controls, so you would need to declare and use a RadWindow with a ContenTemplate (even blank) for this to work as expected. The ContentTemplate element is not created upon client-side setting at this point, so having a content that is not where it is supposed to be may break the control afterwards (e.g., if autosizing is used). A workaround is to create a dummy content template that can alleviate most issues: var wnd = radopen(null, wndName); //create an imitation of the ContentTemplate if (!wnd.___customContentElemCreated) { $telerik.$("iframe", wnd.get_popupElement()).remove(); var cElem = document.createElement("div"); cElem.setAttribute("id", wnd.get_id() + "_C"); cElem.style.display = ""; cElem.style.overflow = "auto"; cElem.style.border = "0px"; wnd.set_contentElement(cElem); wnd.setWidthDockMode(wnd.get_width()); wnd.setHeightDockMode(wnd.get_height()); wnd.___customContentElemCreated = true; } wnd,set_contentElement(theNewElem);
A workaround is to disable animations. You can do this in the control markup/code-behind or JavaScript depending on your case. In case this is not an option, you can disable the animations prior to closing so that autosizing does not use them: function CloseAndRebind() { GetRadWindow().BrowserWindow.refreshGrid(); setTimeout(function () { var wnd = GetRadWindow(); wnd.set_animation(0);//disable animations wnd.close(); }, 0); } You can find the detailed discussion here http://www.telerik.com/forums/issue-with-radwindow-(2014-2-618-45)
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.
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)
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>
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>
A simple workaround is to add the needed border via CSS: .RadWindow.rwNoTitleBar { padding-top: 0.5em; }
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; }
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>
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.
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);
To get the RadWindow to center properly, you need to use its OnClientAutoSizeEnd event and call its center() method: This issue affects only the Q1 2016 SP1 release. <script> function OnClientAutoSizeEnd(sender, args) { sender.center(); } </script> <telerik:RadWindow ID="RadWindow1" runat="server" OpenerElementID="Button1" AutoSize="true" Modal="true" OnClientAutoSizeEnd="OnClientAutoSizeEnd"> <ContentTemplate> <div style="width: 600px; height: 400px; background: yellow;">dummy content for autosizing</div> </ContentTemplate> </telerik:RadWindow> <asp:Button ID="Button1" Text="open RW" runat="server" />