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>
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.
Bug 1:
When RadWindow behavior is set to Maximize/Minimize only, the expected behavior is while minimized, it must only show Maximize button and when maximized, it should show minimize button.
Currently, it is showing restore button on minimizing and then it restores to a random size.
Bug 2:
Page reloads on maximizing the minimized page.
The content scrollbars of RadWindow are not shown in Lightweight if ShowContentDuringLoad="false". The bug is specific to Chrome. ---------------------------------------- Workarounds: 1. Use the control in RenderMode=Classic 2. Enable the ShowContentDuringLoad="true" property 3. or attach a handler to the RadWindow's OnClientPageLoad proeprty and call the restore() method of the control in it: <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" ShowContentDuringLoad="false" VisibleOnPageLoad="true" Width="600px" Height="400px" Title="Wikipedia" OnClientPageLoad="onLoad" NavigateUrl="https://www.wikipedia.org" runat="server"> </telerik:RadWindow> <script> function onLoad(sender, args) { sender.restore(); } </script> ---------------------------------------- Steps to reproduce: 1. Run the following code: <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" ShowContentDuringLoad="false" VisibleOnPageLoad="true" Width="600px" Height="400px" Title="Wikipedia" NavigateUrl="https://www.wikipedia.org" runat="server"> </telerik:RadWindow> Result: No scroll bars are shown, they apper after moving the window
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>
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>
The Classic RenderMode hides all iframes on the page when the user starts moving or resizing the RadWindow. This prevents them from consuming the mouse events and thus ensures proper behavior, but hides content from the user which is unexpected. You can find attached below an illustration of the issue. Due to numerous requests about changing this, the Lightweight mode does not hide the iframes. Thus in some cases, if the browser had not redrawn the RadWindow fast enough, the mouse events may get captured by another iframe. Cast your vote whether you want the Lightweight mode to do this as well. You can change this by using the following script (the second instance has the necessary handlers attached, in a real app you can do that via the RadWindowManager, or via an ASP Theme) <telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true" NavigateUrl="Default2.aspx" RenderMode="Lightweight"></telerik:RadWindow> <telerik:RadWindow runat="server" ID="rw2" VisibleOnPageLoad="true" NavigateUrl="Default3.aspx" RenderMode="Lightweight" OnClientDragStart="hideFrames" OnClientResizeStart="hideFrames" OnClientDragEnd="showFrames" OnClientResizeEnd="showFrames"> </telerik:RadWindow> <script> function hideFrames(sender, args) { setIframesVisible(false, sender); } function showFrames(sender, args) { setIframesVisible(true, sender); } function setIframesVisible(bVisible, wnd) { var iframes = document.getElementsByTagName("iframe"); var iframeToSkip = wnd.get_contentFrame(); for (var i = 0, length = iframes.length; i < length; i++) { var frame = iframes[i]; if (iframeToSkip && (iframeToSkip === frame || iframeToSkip == frame))//compare through == and === because of FF 3.5 and 3.6 iframeToSkip = null; else { frame.style.visibility = bVisible ? "" : "hidden"; //For some extremely strange reason in IE the iframe does not get hidden properly and continues to consume mouse events if ($telerik.isIE) try { frame.contentWindow.document.body.style.visibility = bVisible ? "" : "hidden"; } catch (ex) { } } } } </script>
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); } }
The Lightweight RenderMode of the RadWindow does not have a <label> element next to the <input> inside the status bar. When running this through automated accessibility checks, this can be reported as an issue. It is very likely a false positive because: - when the WAI-ARIA support of the control is enabled (EnableAriaSupport="true"), the role="presentation" attributes is present and it should instruct screen readers to skip this part of the page. - the input has the readonly and unselectable attributes which should indicate to screen readers that the user cannot interact with it. Nevertheless, there are several possible workarounds: - use the Classic RenderMode of the control. It renders a <label> element, but uses many tables. - remove the input (see Example 1 below) - add a label (see Example 2 below) Like this idea to vote for adding a <label> for the statusbar <input> in the Lighweight RenderMode as well. Otherwise, a <label> will not be added. Example 1: remove the statusbar input <telerik:RadWindow runat="server" ID="RadWindow1" VisibleStatusbar="false" RenderMode="Lightweight" EnableAriaSupport="true" VisibleOnPageLoad="true" NavigateUrl="http://www.telerik.com/" OnClientShow="removeStatusInput"></telerik:RadWindow> <script> function removeStatusInput(sender, args) { $telerik.$(".rwStatusBar input", sender.get_popupElement()).remove(); } </script> Example 2: add a statusbar label <telerik:RadWindow runat="server" ID="RadWindow1" VisibleStatusbar="false" RenderMode="Lightweight" EnableAriaSupport="true" VisibleOnPageLoad="true" NavigateUrl="http://www.telerik.com/" OnClientShow="addStatusLabel"></telerik:RadWindow> <script> function addStatusLabel(sender, args) { var label = $telerik.$(".rwStatusBar label", sender.get_popupElement()); if (label.length == 0) { label = document.createElement("label"); label.setAttribute("for", $telerik.$(".rwStatusBar input", sender.get_popupElement()).attr("id")); label.style.display = "none"; label.innerHTML = "status label"; $telerik.$(".rwStatusBar", sender.get_popupElement()).append(label); } } </script>
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.
At present, when a RadWindow is pinned, it still uses position: absolute and an interval is initiated to recalculate its position every 100ms. This causes it to visibly "jump" when the user scrolls the page because of the interval update in its location. Instead, position: fixed should be used to avoid the position calculation on an interval.
Currently, when a maximized RadWindow is closed the OnClientCommand event handler is called with a command "Restore" because when a maximized RadWindow is being closed it is first restored. A flag can be used to avoid it, see the attachment.
I have a radwindow which opens as a modal popup when a button is clicked, in the initial stages the rad window was able to be dragged towards right and bottom, of the screen, even out of the screen bounds, i managed to fix that by setting the KeepInScreenBounds="true" RestrictionZoneID="dvContainerMain", where "dvContainerMain" is the main div within which all the parent controls come but now when i resize the parent browser window to almost size less than radwindow size, rad window seems to behave weird, am not able to resize the radwindow even if the resize behavior is set Please let me know on this issue, seems like there is a bug when the RestrictionZoneID width is less than or close to the radwindow size Thanks Tony Thomas