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.
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
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>
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>
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>
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>
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
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 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.
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.
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
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>
Implement the ability to set the size of RadWindow in percents out of the box. The following knowledge base article describes how it could be achieved for the time being using the RadWindow client-side API: http://www.telerik.com/support/kb/aspnet-ajax/window/setting-size-in-percent-for-the-radwindow.aspx
Admin update: You can follow this article and the sample it provides to create an adaptive RadWindow https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow and you can also tweak the provided code through the rich client-side API of the control so it matches your concrete requirements. RadWindow is one of the controls we use a lot in our applications. As our applications get more and more optimized to be used on smartphones and tablets, we tried to redo some of our functionality or replace them with RadLightboxes or other ways. But the RadLightbox lacks a lot of the functionality the RadWindow has: windowmanager, dialogs, more focussed on regular web-page content,.... I have been waiting for adaptive RadWindow functionality for quite some time, and I really hope I'm not the only one! Today I've read your Q1 2015 road map and I decided to finally post this feature request here too (I contacted your support team about this a few weeks ago). It's easy to dynamically create windows using the windowmanager, pass data between them, show dialogs, etc... It would be very nice to be able to still have all this functionality, but with added adaptive behavior. If the viewport width is too small to display the window or dialog in a correct way, the window/dialog would need to open maximized immediately without restricting height/width. It would be nice to keep the title-bar and the close functionality on top, but I really don't need to move, minimize, maximize, pin,... the window on a smartphone, only be able to view its contents, interact with the content and close the window if needed. A bit like your lightbox does, but less focused on images/galleries and more flexible using the managers and the existing API these windows already have. This would of course need to work for windows with url's (iframe), contenttemplates, and dialogs too. I like the Bootstrap modal-window, for example. If your windows/dialogs could behave a bit more like that on mobile devices, but would keep the functionality of the window-manager, adding iframe-content, dialogs, I would be more than happy! Thanks Nick
Based on customer report: scrollbar of RadWindow disappears after moving the window. Producible on our demos -- http://demos.telerik.com/aspnet-ajax/window/examples/minmaxsize/defaultcs.aspx. Note: Chrome specific bug: https://bugs.chromium.org/p/chromium/issues/detail?id=641881
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">
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