Approved
Last Updated: 20 Apr 2017 13:22 by Tom
ADMIN
Marin Bratanov
Created on: 17 Apr 2017 11:05
Category: Window
Type: Bug Report
1
Cannot resize RadWindow with RestrictionZoneID set and window is positioned against the edge of the zone
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);
					}
				}
1 comment
Tom
Posted on: 17 Apr 2017 18:16
deleted by tstein