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
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.
Each time a window is re-opened its size is decreased with several pixels. video: https://www.screencast.com/t/kxVyE0U2 Steps to reproduce: 1. Open http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx 2. Close and re-open RadWindow multiple times Result: The window's height is decreased each time. Recommended Workaround: Apply the following CSS class to the page with RadWindow (*** Updated on 22 Jan 2018 ***) <style> .RadWindow { padding: 0 6px 6px !important; } </style> Optional Workaround: Manually resize the Window at the stage of opening it. This example is re-using the width and height set in the markup. JavaScript <script> function openFixedSize(sender, args) { var oWindow = radopen("WindowContent.aspx", "RadWindow1"); oWindow.__oWidth = oWindow.__oWidth ? oWindow.__oWidth : oWindow.get_width(); oWindow.__oHeight = oWindow.__oHeight ? oWindow.__oHeight : oWindow.get_height(); oWindow.setSize(oWindow.__oWidth, oWindow.__oHeight); } </script> Markup <telerik:RadButton ID="RadButton1" runat="server" Text="Open - Custom" AutoPostBack="false" OnClientClicked="openFixedSize"></telerik:RadButton> <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server"> <Windows> <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" Title="" Height="500px" Width="500px" Left="1px" Top="1px" ReloadOnShow="true" ShowContentDuringLoad="false" Behaviors="None" Modal="true" ShowOnTopWhenMaximized="True" VisibleStatusbar="False" VisibleTitlebar="false"> </telerik:RadWindow> </Windows> </telerik:RadWindowManager>
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(); } }
This is caused by <button> elements without a type attribute. Workarounds are - add a JS function like this Sys.Application.add_load(function () { // Add the "type=button" attribute to the RadWindow buttons so they don't try to submit the form. $("div.rwDialogButtons button").attr("type", "button"); }); - OR, override the templates and add the attribute: <asp:TextBox ID="Textbox1" runat="server" /> <telerik:RadWindowManager ID="rwm1" runat="server" RenderMode="Lightweight"> <AlertTemplate> <div class="rwDialog rwAlertDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(true); return false;">##LOC[OK]##</button> </div> </div> </AlertTemplate> <PromptTemplate> <div class="rwDialog rwPromptDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> <div class="rwPromptInputContainer"> <script type="text/javascript"> function RadWindowprompt_detectenter(id, ev, input) { if (!ev) ev = window.event; if (ev.keyCode == 13) { var but = input.parentNode.parentNode.parentNode.getElementsByTagName("button")[0]; if (but) { if (but.click) { but.click(); } else if (but.onclick) { but.focus(); var click = but.onclick; but.onclick = null; if (click) click.call(but); } } return false; } else return true; } </script> <input title="Enter Value" onkeydown="return RadWindowprompt_detectenter('{0}', event, this);" type="text" class="rwPromptInput radPreventDecorate" value="{2}" /> </div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(this.parentNode.parentNode.getElementsByTagName('input')[0].value); return false;">##LOC[OK]##</button> <button type="button" class="rwCancelBtn" onclick="$find('{0}').close(null); return false;">##LOC[Cancel]##</button> </div> </div> </PromptTemplate> <ConfirmTemplate> <div class="rwDialog rwConfirmDialog"> <div class="rwDialogContent"> <div class="rwDialogMessage">{1}</div> </div> <div class="rwDialogButtons"> <button type="button" class="rwOkBtn" onclick="$find('{0}').close(true); return false;">##LOC[OK]##</button> <button type="button" class="rwCancelBtn" onclick="$find('{0}').close(false); return false;">##LOC[Cancel]##</button> </div> </div> </ConfirmTemplate> </telerik:RadWindowManager>
To remove the built-in icon for the Lightweight mode, add the following CSS rules to your page: div.rwDialog.rwAlertDialog:before { content: ""; } div.rwDialog.rwConfirmDialog:before { content: ""; }
FF 52 and Chrome58 seem to have started reading some CSS from 2010 differently. This affects controls such as RadMenu, RadTreeView, RadPanelBar, RadEditor, RadListBox, RadTabStrip that are in the ContentTemplate of a RadWindow. The issue can manifest as bad element alignment or extra padding. Internal fix will be available as of R2 2017. There are two workarounds: - use the Lightweight Render Mode (helps in some cases) - add a CSS override similar to the following /* FireFox 52+ and Chrome 58+ */ html:first-child .RadWindowFixed ul { float: none !important; } <telerik:RadWindow ID="RadWindow2" runat="server" Title="Rad Window with RadTreeView - Fixed" Width="400px" MinWidth="230px" MaxWidth="600px" CssClass="RadWindowFixed" Height="610px" VisibleOnPageLoad="true" Behaviors="Minimize, Move, Maximize, Resize" VisibleStatusbar="false" KeepInScreenBounds="true" Left="406">
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>
Most notable issues - Metro skin does not show the correct (blue) color. For a timeline and status updates for the Lightweight mode follow https://feedback.telerik.com/Project/108/Feedback/Details/216601-wrong-titlebar-colors-in-metro-and-metrotouch-skins-in-lightweight-rendermode - RTL mode does not order the buttons properly Workarounds for both: /*lightweight mode*/ .RadWindow_Metro div.rwTitleBar, .RadWindow_MetroTouch div.rwTitleBar { background-color: #25a0da; } /* if you want all the borders blue */ div.RadWindow_Metro, div.RadWindow_MetroTouch { border-color: #25a0da; background-color: #25a0da; } .rwRtl .rwCommands li.rwListItem { float: right; } /* classic mode- metro skin color issue*/ div.RadWindow_Metro .rwTitleRow { background-color: #25a0da; }
When you create a dynamic tooltip that loads its content from a service (http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx), its height is 100% while the loading takes place. You can workaround this issue by configuring a small initial height for the tooltip (for example 50px), then using the following script to change its height according to the loaded content: <telerik:RadToolTipManager runat="server" OnClientResponseEnd="onClientResponseEnd" Height="50px" > ... </telerik:RadToolTipManager> <script> function onClientResponseEnd() { var current = Telerik.Web.UI.RadToolTip.getCurrent(); if (current) { var height = $telerik.getBounds(current.get_contentElement()).height; current.set_height(height); } } </script>
The control RadWindow render his element with incorrect names of css classes: like he rendered rwTitleBar instead of rwTitlebar, and rwStatusBar instead of rwStatusbar this bug is produced only when i use a custom theme. please if you have a solution bring that.