The Window will not open in the center of the screen if it was already opened once and the page has been scrolled. It seems that the Window keeps opening at the same position initially was opened, hence it could open out of screen bounds.
Code
<style>
.mydiv {
margin: 2000px 100px;
}
</style>
<telerik:RadWindow ID="RadWindow1" runat="server">
<ContentTemplate>
<h3>RadWindow1 Content</h3>
</ContentTemplate>
</telerik:RadWindow>
<script>
function ShowEditForm(sender, args) {
var wnd = $find("<%= RadWindow1.ClientID %>");
wnd.show();
}
Sys.Application.add_load(function () {
setTimeout(function () {
$telerik.$('.mydiv')[0].scrollIntoView();
}, 100)
});
</script>
<div class="mydiv">
<telerik:RadButton runat="server" ID="RadButton1" Text="OpenWindow" AutoPostBack="false" OnClientClicked="ShowEditForm" />
</div>
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>
This issue seems fixed for AzureAD while it is not for WSFederation authentication
It seems the final solution is to manually remove the entries with null/empty key from the submitted form
The RadWindow width and height are not persisted when the control has been minimized before a PostBack (or navigation to another page).
Steps to reproduce:
1. Run the code below.
2. Click the "Open" Button
3. Minimize RadWindow
5. Click the "PostBack" button
6. Maximize RadWindow
Result: The restored RadWindow has wrong size
<telerik:RadButton ID="Btn1" runat="server" Text="Open" AutoPostBack="false" OnClientClicked="openFirst"></telerik:RadButton>
<br />
<telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="true" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableViewState="false" PreserveClientState="true">
<Windows>
<telerik:RadWindow ID="radWindow_Evidence" runat="server" Title="Evidence" EnableViewState="false" AutoSize="false" DestroyOnClose="true" ReloadOnShow="true"
VisibleTitlebar="true" VisibleStatusbar="false" Width="900px" Height="500px"
Behaviors="Close,Minimize,Move,Resize,Maximize" Left="320px" Top="0px">
<ContentTemplate>
Some content
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script>
function openFirst() {
radopen(null, "radWindow_Evidence");
}
</script>
Steps to reproduce:
1) Start dragging a RadWindow;
2) While dragging, use the mouse scroll to scroll the page
Result: The cursor will not be on the title bar anymore.
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
When I set RadWindow property VisibleTitlebar="false" then top border is missing on window. Here is sample code: <telerik:RadWindow runat="server" ID="GenerateReportWaitWindow" Width="440px" Height="200px" VisibleTitlebar="false" Modal="true" ReloadOnShow="false" VisibleStatusbar="false" VisibleOnPageLoad="false" EnableShadow="false" Animation="Fade" Behaviors="None" Title="Čakajte prosím..."> <ContentTemplate> <div style="min-height: 66%;"> <div style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-weight: bold;"> <asp:Label ID="Label4" runat="server">Prebieha vytváranie tlačovej zostavy. Čakajte prosím.</asp:Label> <asp:Label ID="Label5" runat="server">(V závislosti od počtu záznamov to môže trvať aj niekoľko minút...)</asp:Label> <asp:Label ID="Label6" runat="server" ForeColor="Red" Style="display: none;"></asp:Label> </div> <div style="margin-left: auto; margin-right: auto; text-align: center;"> <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Animated/loading1.gif" /> </div> </div> </ContentTemplate> </telerik:RadWindow> Admin comment: Actually there is 1px top border, but it is hard to be noticed. As a temporary solution, one can increase it via the following padding: Copy Code <style> .RadWindow { padding: 4px 5px 5px !important; } </style>
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>
When I try to close the RadWindow on mobile (Chrome Mobile, Chrome Mobile desktop emulator) by clicking on the default Close button (aka X button), if I have a clickable element behind the X button, this one also grabs the input and triggers the OnClick event of the behind element. The problem can be reproduced in the following demo http://demos.telerik.com/aspnet-ajax/window/examples/radopen/defaultcs.aspx. Workaround: <script> function OnClientShow(sender, args) { $telerik.$(".rwCloseButton").bind("touchstart", function (e) { $telerik.cancelRawEvent(e); }); } </script> <telerik:RadWindow OnClientBeforeShow="OnClientShow" RenderMode="Lightweight" ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px" Height="400px" Title="Telerik RadWindow" Behaviors="Default"> </telerik:RadWindow>
Workaround in OnClientBeforeClose (commented):
<telerik:RadWindowManager RenderMode="Lightweight" OnClientClose="OnClientClose"
OnClientBeforeClose="OnClientBeforeClose" Behaviors="Close, Move, Resize,Maximize"
ID="RadWindowManager" runat="server" Width="450" Height="400">
<Windows>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" VisibleOnPageLoad="true"
Title="Wikipedia" _NavigateUrl="http://www.wikipedia.org" IconUrl="wikiFavicon.ico" runat="server">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script type="text/javascript">
function OnClientBeforeClose(oWnd, args) {
//workaround:
//oWnd.get_popupElement().style.visibility = "hidden";
}
function OnClientClose(oWnd) {
debugger;
}
</script>
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(); } }
Scenario description and workaround follow. Note the comments in the workaround and test before using, because it introduces some other unwanted behaviors, mostly related to the bottom/right edge of the zone. WORKAROUND 1: <div id="zone" style="width: 600px; height: 500px; background: yellow;"></div> <telerik:RadWindow runat="server" ID="rw1" RenderMode="Lightweight" VisibleOnPageLoad="true" Left="0" Top="0" RestrictionZoneID="zone"></telerik:RadWindow> <script> Telerik.Web.UI.Window.LightweightView.prototype._resizingHandler = function(resizable, args){ $telerik.cancelRawEvent(args.get_domEvent()); var edges = this.restrictBounds, bounds = this._getResizeBounds(args), borders = this.resizeHelper.borders, fullBounds = { x: bounds.x - borders.left,//originally, subtract y: bounds.y - borders.top,//originally, subtract width: bounds.width + borders.horizontal, height: bounds.height + borders.vertical}; //debugger //console.log(fullBounds); //changing the direction in which borders are counted above (+ or -) changes the behavior and the potential issues //if you subtract from the position, resizing will not be available next to the top/left border of the restriction zone //if you add to the position, resizing will be available but the user can resize in the direction of the zone bounds and thus, out of the bounds of the zone, so dragging may become unavailable //also, this will make resizing worse when the window touches the right or bottom of the zone var inContainer = this.window._checkRestrictionZoneBounds(edges, fullBounds); bounds.width = Math.max(resizable.options.constraints.minWidth, bounds.width); bounds.height = Math.max(resizable.options.constraints.minHeight, bounds.height); args.set_cancel(true); if(inContainer && this.touchCount++ > 0) { var style = this.ui.container.style; style.left = bounds.x + "px"; style.top = bounds.y + "px"; this._setWidth(bounds.width); this._setHeight(bounds.height); this._currentResizeBounds = bounds; } } </script> WORKAROUND 2: Add this to the resizeEnd and dragEnd events of the RadWindow to try and have it never touch the sides of the restriction zone at all. function keepThisWindowInBounds(sender) { if (!sender.isMinimized() && !sender.isMaximized()) { var position = sender.getWindowBounds(); var rzRect = document.getElementById(sender._restrictionZoneID).getBoundingClientRect(); // note rzRect height and width are both 1px bigger than the rzElement clientWidth and clientHeight // check width and height if (position.width > rzRect.width - 3) { position.width = rzRect.width - 3; sender.set_width(position.width); } if (position.height > rzRect.height - 3) { position.height = rzRect.height - 3; sender.set_height(position.height); } var needToMove = false; if (position.x < 1) { needToMove = true; position.x = 1; } else if (position.x > rzRect.width - position.width - 2) { needToMove = true; position.x = rzRect.width - position.width - 2; } if (position.y < 1) { needToMove = true; position.y = 1; } else if (position.y > rzRect.height - position.height - 2) { needToMove = true; position.y = rzRect.height - position.height - 2; } if (needToMove) sender.moveTo(position.x, position.y); } }
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: ""; }