Completed
Last Updated: 06 Jul 2018 11:55 by Informat
ADMIN
Created by: Vessy
Comments: 1
Category: Window
Type: Bug Report
1
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>
Declined
Last Updated: 26 Jun 2018 18:24 by ADMIN
ADMIN
Created by: Misho
Comments: 2
Category: Window
Type: Feature Request
3
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
Completed
Last Updated: 26 Jun 2018 11:09 by ADMIN
Created by: Informat
Comments: 5
Category: Window
Type: Feature Request
13
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
Under Review
Last Updated: 01 May 2018 11:50 by ADMIN
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.



Completed
Last Updated: 26 Apr 2018 14:36 by Bill O'Neil
ADMIN
Created by: Ivan Zhekov
Comments: 3
Category: Window
Type: Feature Request
3
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
Completed
Last Updated: 13 Mar 2018 11:45 by Ivan
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">
Approved
Last Updated: 23 Jan 2018 17:03 by ADMIN
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


Completed
Last Updated: 29 Nov 2017 15:41 by ADMIN
You can work around this by storing the currently focused element before calling autoSize()
and then using the OnClientAutoSizeEnd event (http://www.telerik.com/help/aspnet-ajax/window-client-side-events-onclientautosizeend.html) to restore the focus.

//this goes in the content
function autoSizeWnd() {
	//code that manipulates the content so autosizing is needed
	var oWnd = getRadWindow();
	if ($telerik.isIE) { //assumes you have the Telerik core client-side libraries loaded (e.g., by having a Telerik control on this page). If you don't, you can skip the check or add them manually
		oWnd.__currActElem = document.activeElement;
	}
	oWnd.autoSize();
}


//this goes in the main page where the RadWindow is declared
function autoSizeEndHandler(sender, args) {
	setTimeout(function () {
		if (sender.__currActElem && sender.__currActElem.focus) {
			sender.__currActElem.focus();
		}
	}, 0);
}
Completed
Last Updated: 29 Nov 2017 11:48 by ADMIN
The easiest workaround is to remove the overlay (e.g., set the Overlay property to false or call the set_overlay(false) client-side method). In most cases an overlay is not needed, as it is used only for showing the popup over heavyweight objects like PDFs, Flash or Java applets: http://www.telerik.com/support/kb/aspnet-ajax/window/details/control-is-shown-behind-a-heavy-weight-object-(pdf-flash-activex-etc)
Completed
Last Updated: 21 Nov 2017 09:49 by ADMIN
The idea is to let a simple property have the RadWindow close on outside click like the RadLightBox: http://demos.telerik.com/aspnet-ajax/lightbox/examples/overview/defaultcs.aspx.

At the moment, a few lines of code are needed and you can find examples here: http://www.telerik.com/forums/close-modal-on-overlay-click#DGbE7tSl3kWR926gm99m9A.
New
Last Updated: 05 Jul 2017 12:32 by ADMIN
ADMIN
Created by: Rumen
Comments: 0
Category: Window
Type: Bug Report
0
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>
Approved
Last Updated: 23 Jun 2017 13:04 by ADMIN
ADMIN
Created by: Ivan Danchev
Comments: 1
Category: Window
Type: Bug Report
0

			
Completed
Last Updated: 21 Jun 2017 08:34 by ADMIN
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

Completed
Last Updated: 02 Jun 2017 12:01 by ADMIN
A workaround is to call the _updateTitleWidth() method in the OnClientAutoSize event. A small sample is attached below.
Completed
Last Updated: 19 May 2017 14:03 by ADMIN
			/*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;
            }
Completed
Last Updated: 10 May 2017 22:03 by Vasssek
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: "";
			}
Completed
Last Updated: 08 May 2017 13:57 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 3
Category: Window
Type: Bug Report
0
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;
			}
Completed
Last Updated: 21 Apr 2017 14:10 by ADMIN
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>
Approved
Last Updated: 20 Apr 2017 13:22 by Tom
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);
					}
				}
Completed
Last Updated: 20 Apr 2017 13:19 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 0
Category: Window
Type: Bug Report
0
Workaround
Telerik.Web.UI.RadWindow.prototype.set_restrictionZoneID = function(value) {
	this._restrictionZoneID = value;
	if (value && this.isCreated()) {
		this.fitInRestrictionZone();
	}
}
1 2 3 4 5 6