Do Windows work on mobile?

4 posts, 0 answers
  1. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 22 May 2014 Link to this post

    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();
        }
    };

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 26 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 28 May 2014 Link to this post

    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. =/
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready