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>
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
This is related to a browser bug in accessing the document.activeElement property inside an iframe under IE9 and IE10. See this KB article for additional information and examples: http://www.telerik.com/support/kb/aspnet-ajax/window/modal-radwindow-in-radwindow-in-ie9-and-ie10.aspx . There are several possible workarounds: 1) remove the Modal feature. 2) Replace the opening logic with the one from this thread ( http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx ) and add a small timeout before showing the RadWindow. Even 0ms could suffice so the browser has an active element 3) Replace the RadAjaxPanel with an ASP UpdatePanel with UpdateMode set to Conditional 4) Add a function that will provide a focused element and call it in the OnClientBeforeShow event of the RadWindow 5) Add that function and call it in the ResponseScripts of the RadAjaxPanel The function could look like this: function fixIE() { document.documentElement.focus();} where, of course, you can focus some other element on the page. A sample is attached.
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); }
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%"; }
This iframe element has an empty html tag that can cause issues with the Section 508 validation. Also, the iframe is not used so it does not need to be present in the markup at all. The following script added to the OnClientShow event of the RadWindowManager can remove this iframe: function OnClientShow(sender, args) { if (!sender._isPredefined) return; //check if it is a predefined dialog var frame = $telerik.$("iframe", sender.get_popupElement()); frame.remove(); }
When a RadWindow with RenderMode=Lightweight is shown the client-side equivalents of the Width and Height property change and the final dimensions of the popup are different than expected (larger if the popup is modal and smaller if not). These values should not change unless the set_width() or set_height() methods are called. Possible workarounds: - use RenderMode=Classic - try adding the following CSS rule div.RadWindow { padding: 0 6px 5px; } - use the following script together with the custom attributes in the markup: <telerik:RadWindow ID="m_printWindow" runat="server" RenderMode="Lightweight" Title="Print Settings" Width="180" Height="330" origWidth="180" origHeight="330" Behaviors="Close,Move" VisibleStatusbar="False"> <ContentTemplate> </ContentTemplate> </telerik:RadWindow> <asp:Button ID="Button1" Text="show Wnd" OnClientClick="showWnd(); return false;" runat="server" /> <script type="text/javascript"> function showWnd() { var wnd = $find("<%= m_printWindow.ClientID %>"); wnd.show(); var origWidth = wnd.get_element().getAttribute("origWidth"); var origHeight = wnd.get_element().getAttribute("origHeight"); wnd.setSize(origWidth, origHeight); wnd.center(); } </script> - try the following approach: <script type="text/javascript"> function OnClientShow(sender, args) { setTimeout(function () { sender.remove_show(OnClientShow); sender.set_modal(sender.get_element().getAttribute("ShouldBeModal")); var popupElem = sender.get_popupElement(); popupElem.style.width = sender.get_width() + "px"; popupElem.style.height = sender.get_height() + "px"; }, 0); } </script> <telerik:RadWindowManager RenderMode="LightWeight" ID="rwmVessel" DestroyOnClose="false" runat="server" Skin="WebBlue" OnClientShow="OnClientShow"> <Windows> <telerik:RadWindow RenderMode="LightWeight" AutoSize="false" ID="rwSendReceipt" ReloadOnShow="true" VisibleOnPageLoad="false" ShowContentDuringLoad="false" Title="Submission Receipt" runat="server" Skin="WebBlue" Behaviors="Close" VisibleStatusbar="false" Width="760" Height="475" ShouldBeModal="true" IconUrl="images/application_16.png"> </telerik:RadWindow> </Windows> </telerik:RadWindowManager>
Test Environment:
OS: Windows_11URL: https://demos.telerik.com/aspnet-ajax/window/examples/windowmanager/defaultcs.aspx
Repro Steps:
Actual Behavior:
Focus comes out of 'delete' popup without closing it automatically.
Expected Behavior:
When opening the 'delete pop-up', focus is expected to move to delete pop-up controls and focus should not leave the pop-up until it is closed. When a pop-up is opened, focus should move into that item and when it is closed, focus should return to the same control that opened it. In addition, focus should be confined to the window until the user closes it with an action, such as the close button or the ‘ESC’ key.
When using Telerik controls with Bootstrap theme and Bootstrap 3.x the radWindow title has cosmetic issue (see attached).
It appeared that Bootstrap global box-sizing: border-box is the reason.
Repro markup:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<telerik:RadWindow Skin="Bootstrap" ID="RadWindow1" runat="server" Title="Some RadWindow title" VisibleOnPageLoad="true" RenderMode="Lightweight">
<ContentTemplate>adadsa</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
Bootstrap skin
Silk skin
The workaround is to set box-sizing: content-box in rwTitleWrapper:
<style>
.rwTitleWrapper
{
box-sizing: content-box !important;
}
</style>
Hi
RadWindow is not opening in Windows10 PC , ( IE 11 / Google Chrome)
Working in all windows 8 PCs
Getting Error Script5009 'Telerik' is undefined script block (37) (2,5) in the IE Console
Regards
The wrapper of the RadAlert/Confirm/Prompt buttons is wider than the dialog itself in Material skin, in IE/Chrome: https://www.screencast.com/t/4IatOUgMp Steps to reproduce: 1. Open in Chrome: http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx?skin=Material 2. Click on any of the demo buttons (e.g. RadAlert from Client) Result: The wrapper of the Dialog buttons is wider than the dialog itself
A workaround is to call the _updateTitleWidth() method in the OnClientAutoSize event. A small sample is attached below.
/*lightweight mode*/ .RadWindow_Metro div.rwTitleBar, .RadWindow_MetroTouch div.rwTitleBar { background-color: #25a0da; } /*if you want to remove the sides padding*/ /*.RadWindow.RadWindow_Metro, .RadWindow.RadWindow_MetroTouch { padding-left: 0px; padding-right: 0px; padding-bottom: 0px; }*/ /* if you want all the borders blue */ /*div.RadWindow_Metro, div.RadWindow_MetroTouch { border-color: #25a0da; background-color: #25a0da; }*/ /* when Classic form decorator is prsent it adds a white border and changes the font size of h6 elements, avoid that for the Lightweight Radwindow if you cannot move to a Lightweight form decorator as well*/ div.RadWindow h6.rwTitle { border-bottom: none; font-size: inherit; }
Workaround Telerik.Web.UI.RadWindow.prototype.set_restrictionZoneID = function(value) { this._restrictionZoneID = value; if (value && this.isCreated()) { this.fitInRestrictionZone(); } }
When using DOCTYPE //W3C//DTD XHTML 1.0 Strict//EN and setting height to 100px RadWindow AutoResize=True gives problems in IE10 by adding unnecessary scrollbars, and in Chrome, FF and Safari the window is to high (approx. 55px too much). Refers to forum entry: http://www.telerik.com/community/forums/aspnet-ajax/window/autosize-behavior-question.aspx (I used the same sample project to replicate the problem). Please see attached screenshot and project.
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);