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

Do Windows work on mobile?

3 Answers 68 Views
Window
This is a migrated thread and some comments may be shown as answers.
Bobby
Top achievements
Rank 1
Bobby asked on 22 May 2014, 08:06 PM
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();
    }
};

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 26 May 2014, 09:38 AM
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.

 
0
Bobby
Top achievements
Rank 1
answered on 28 May 2014, 08:43 PM
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. =/
0
Kiril Nikolov
Telerik team
answered on 29 May 2014, 11:10 AM
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.

 
Tags
Window
Asked by
Bobby
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Bobby
Top achievements
Rank 1
Share this question
or