Do Windows work on mobile?

[Bobby]

I am currently using a window to function as a modal popup.  While the window works without issue on the desktop, it does not seem to open on Android - Chrome.  Does the window not support mobile browsers, or is there a bug in my code?

The view code:

    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink(Resources.NavigationLink_Feedback, "Index", "Feedback", routeValues: null, htmlAttributes: new { @class = "feedbackmodallink" })</li>
        </ul>
    </nav>

@(Html.Kendo().Window()
    .Name("FeedbackWindow")
    .Title(Resources.Title_Feedback)
    .LoadContentFrom("Index", "Feedback")
    .Actions(action => action.Maximize().Close())
    .Modal(true)
    .Iframe(true)
    .Visible(false)
    .AutoFocus(true)
    .Events(events => events.Refresh("FeedbackWindow_Refresh"))
)

with the following javascript:

    $(document).ready(function () {
        var tFeedbackWindow = $("#FeedbackWindow").data("kendoWindow");

        $("a.feedbackmodallink").click(function (e) {
            // Was the middle button clicked?
            // (allow link to still be opened in new tab with middle click should user choose)
            if (e.which != 2)
            {   // No
                e.preventDefault();

                // Show feedback modal
                MyNameSpace.TelerikWindow.OpenWindow(tFeedbackWindow);
            }
        });
        $(window).resize(function (e) {
            // Is feedback modal currently visible?
            if (tFeedbackWindow.options.visible) {
                // Yes, resize modal to new browser size
                MyNameSpace.TelerikWindow.ResizeWindow(tFeedbackWindow);
            }
        });
    });

    function FeedbackWindow_Refresh() {
        // Resize window to content
        MyNameSpace.TelerikWindow.ResizeWindow(this);
    }

MyNameSpace.TelerikWindow = {
    OpenWindow: function (tWindow) {
        /// <summary>Opens a Telerik Window after ensuring the window is refreshed back to its original URL and resized to its contents.</summary>
        /// <param name="tWindow" type="kendoWindow">The Telerik Window to open.</param>

        // Does the window have an iframe?
        if (tWindow.options.iframe) {
            // Yes
            // Get iframe document
            var iframe = tWindow.element.children("iframe")[0];

            // Get iframe's original and current urls
            var originalURL = iframe.src;
            var currentURL = iframe.contentDocument.location.href;

            // Do the urls match?
            if (originalURL !== currentURL) {
                // No, refresh window back to original url
                tWindow.refresh();
            } else {
                // Yes, ensure window is sized to contents
                this.ResizeWindow(tWindow);
            }
        }

        // Open window
        tWindow.open();
    },
    ResizeWindow: function (tWindow, minWidth, minHeight) {
        /// <summary>Resizes a Telerik Window to its contents while keeping window within screen bounds.</summary>
        /// <param name="tWindow" type="kendoWindow">The Telerik Window to resize.</param>
        /// <param name="minWidth" type="int">The desired min width of window (defaults to 800px to keep bootstrap small columns from wrapping)</param>
        /// <param name="minHeight" type="int">The desired min height of window (defaults to 375px to keep intial IE load from being too short)</param>

        // Ensure minWidth and minHeight are defined
        minWidth = (typeof minWidth === "undefined" ? 800 : minWidth);
        minHeight = (typeof minHeight === "undefined" ? 375 : minHeight);

        var oldWidth = tWindow.options.width;
        var oldHeight = tWindow.options.height;
        var newWidth = oldWidth;
        var newHeight = oldHeight;

        // Does the window have an iframe?
        if (tWindow.options.iframe) {
            // Yes
            // Get iframe content size (adding 40px height buffer)
            var $iframeBody = tWindow.element.children("iframe").contents().find("body");
            var iframeWidth = $iframeBody.width();
            var iframeHeight = $iframeBody.height() + 40;

            // Initialize set new width and height to iframe dimensions
            newWidth = (iframeWidth > minWidth ? iframeWidth : minWidth);
            newHeight = (iframeHeight < minHeight ? minHeight : iframeHeight);
        }

        // Ensure window fits within screen bounds (using 50px buffer)
        var browserWindowWidth = window.innerWidth - 50;
        var browserWindowHeight = window.innerHeight - 50;
        newWidth = (newWidth >= browserWindowWidth ? browserWindowWidth : newWidth);
        newHeight = (newHeight >= browserWindowHeight ? browserWindowHeight : newHeight);

        // Resize window, if needed
        if (newWidth !== oldWidth || newHeight !== oldHeight) {
            tWindow.setOptions({ width: newWidth, height: newHeight });
        }

        // Ensure window is still centered
        tWindow.center();
    }
};

[Kiril Nikolov]

Hello Bobby,

I have tested the following example on an Android device running KitKat and Chrome browser, and it worked as expected:

http://jsbin.com/vonay/1/edit

Can you please confirm what is the exact Android version that you use? Could you also provide us with a small runnable sample, where the issue can be reproduced so we can further assist you?

Regards,
Kiril Nikolov
Telerik

 

 

[Bobby]

I am currently running Android 4.1.2 and the QA person whom first reported the issue is running Windows Phone 8.  Neither of us can get the example I posted working on either phone unless you manually switch to the mobile browser's "request desktop view" option.

That being said, I was able to get a basic Telerik button and Telerik window to work on mobile by using only the straight Telerik API javascript without the custom javascript I posted to keep the window in bounds and reset the window's contents to original contents.  Therefore, it would appear the issue is something within my custom javascript that apparently works different on mobile than on desktop.

Pity the MVC window doesn't have a built-in setting to keep it in bounds or reset its current contents to its original contents like the WebForms window.  I could happily throw out my custom code then. =/

[Kiril Nikolov]

Hello Bobby,

We are always open to user feedback and suggestions. This is why I would like to encourage you to check our ​UserVoice section where you can post your suggestions, so they will be considered and implemented in the future releases.

Regards,
Kiril Nikolov
Telerik