RadWindow Overlay Manipulation (or issue)

[Craig]

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

[Ianko]

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

[panarat]

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

[Rumen]

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