This is a migrated thread and some comments may be shown as answers.

RadWindow Overlay Manipulation (or issue)

3 Answers 143 Views
Window
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 29 Oct 2013, 05:20 PM
Hi,
I have a RadWindow which opens with Modal=true in the centre of my screen.  An overlay accompanies the modal window just before the closing form tag as usual...

The problem is... when I resize my browser, the overlay is happy to increase in size... but when I resize the browser back to the original position I am shown scrollbars.  It seems that the overlay is capable of increasing in size dynamically, but not decreasing dynamically.

I'm not sure if this is a bug... I cannot think of a reason why growth would be needed but not vice versa...

Does anyone know how I can manipulate this overlay?  The increase in height and width of the overlay must be set using some Telerik javascript.  I have tried accessing this DOM element and setting the height and width through JQuery, but I cannot seem to get access to the div overlay itself (in the resize browser event) although I can access this using exactly the same syntax in Chrome console after the page has fully loaded! (Could this be because I am attempting to manipulate a div via JQuery with an attribute of unselectable="on" ?)

Can anyone help me to resize the overlay when reducing the size of the window please?

Kind Regards

Craig

3 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 01 Nov 2013, 11:54 AM
Hello Craig,

You are correct, the modal overlay of the window extends the body element. This is why the scrollbars appear after window resizing.

You could try if the following example setup adjusts the behavior to your expectations:
<telerik:RadWindow runat="server" ID="RadWindow1"
    VisibleOnPageLoad="true" Modal="true">
    <ContentTemplate>
        <h1>Some content</h1>
    </ContentTemplate>
</telerik:RadWindow>
 
<script type="text/javascript">
    Sys.Application.add_load(function () {
        var windowControl =$find("<%= RadWindow1.ClientID %>");
 
        $telerik.addExternalHandler(window, "resize", function (e) {
            windowControl.center();
            windowControl.set_modal(false);
            windowControl.set_modal(true);
        });
    });
</script>


Regards,
Ianko
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
panarat
Top achievements
Rank 1
answered on 30 Apr 2019, 09:19 PM

when i apply these set_modal command in the code then i cannot fill out anything in the textbox at all. On the phone, once i touch on the textbox to fill in the form then the keyboard just show up 1s then disappeared and the cursor does not stay in the textbox at all.

Look like textbox is losing the focus ability. help plz

0
Rumen
Telerik team
answered on 03 May 2019, 01:38 PM
Hi Panarat,

Here is an example showing how to keep the keyboard visible when clicking on a textbox:

<telerik:RadWindow runat="server" ID="RadWindow1"
    VisibleOnPageLoad="true" Modal="true">
    <ContentTemplate>
        <h1>Some content</h1>
        <input  type="text" />
        <input  type="text" />
 
    </ContentTemplate>
</telerik:RadWindow>
  
<script type="text/javascript">
    Sys.Application.add_load(function () {
        var windowControl =$find("<%= RadWindow1.ClientID %>");
  
        $telerik.addExternalHandler(window, "resize", function (e) {
 
            windowControl.center();
            windowControl.set_modal(false);
            windowControl.set_modal(true);
             
        });
    });
 
   
    var $T = Telerik.Web.UI;
    Telerik.Web.UI.RadWindow.prototype._makeModal = function (bModal) {
         
        //Dispose of old state, whatever it was
        if (this._onModalShowHandler) {
            this.remove_show(this._onModalShowHandler);
            this._onModalShowHandler = null;
        }
 
        if (this._onModalCloseHandler) {
            this.remove_close(this._onModalCloseHandler);
            this._onModalCloseHandler = null;
        }
 
        if (this._modalExtender) {
            this._modalExtender.dispose();
            this._modalExtender = null;
        }
 
        //Return if modality should be turned off
        if (!bModal) return;
 
        //if it is an instance of window manager, return, we do not want associated events with the manager
        if (typeof ($T.RadWindowManager) != "undefined" && $T.RadWindowManager.isInstanceOfType(this)) {
            return;
        }
 
        this._onModalShowHandler = function (sender) {
            //Create the modal overlay here, becase it needs to be passed an existing html this._popupElement
            if (!sender._modalExtender) {
                var popup = sender._popupElement;
                var isAccessible = sender.get_enableAriaSupport();
                sender._modalExtender = new $T.ModalExtender(popup, {
                    enableAriaSupport: isAccessible,
                    getNodesToHide: function () {
                        return $(popup).nextAll(":not(script,link)").get();
                    },
                    trapTabKey: isAccessible
                });
            }
 
 
            //Show the modal overlay
            sender._modalExtender.show();
 
            //NEW - under IE and FF, the focused element should lose when the modal RadWindow is shown
            //store it in a filed to restore it when the RadWindow is closed
            var focusedElement = null;
            try {
                focusedElement = document.activeElement;
            }
            catch (ex) {
                document.documentElement.focus();
                focusedElement = document.activeElement;
            }
            //if the focused element is the body no need to blur, furthermore blurring it causes IE to minimize
            if (focusedElement && focusedElement.tagName && focusedElement.tagName.toLowerCase() != "body") {
                //if in dock mode and the focused element is in the RadWindow, do not remove the focus
                var toBlurDockMode = (!$telerik.isDescendant(this._contentElement, focusedElement) && this._dockMode);
                //if predefined - do nothing, handled by the manager
                if (!(sender._isPredefined) || toBlurDockMode) {
                    sender._focusedPageElement = focusedElement;
                    setTimeout(function () {
                        focusedElement.scrollIntoView();
                    }, 100);
                    //focusedElement.blur();
                }
            }
 
            //Re-center because of Mozilla
            if (sender.get_centerIfModal()) {
                sender.center();
            }
        };
        this.add_show(this._onModalShowHandler);
 
 
        this._onModalCloseHandler = function (sender) {
            //Hide the modal overlay
            //It is crucial to use a timeout - or else IE crashes when closing a modal window opened from another modal window
            window.setTimeout(function () {
                if (sender._modalExtender) sender._modalExtender.hide();
                var focusedElement = sender._focusedPageElement;
                if (focusedElement) {
                    try {
                        focusedElement.focus();
                    }
                    catch (ex) { }
                    sender._focusedPageElement = null;
                }
            }, 10);
        };
        this.add_close(this._onModalCloseHandler);
    }
</script>


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
Craig
Top achievements
Rank 1
Answers by
Ianko
Telerik team
panarat
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or