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

KendoUI Mobile DropDownList in Icenium Mist

7 Answers 189 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Spechtus
Top achievements
Rank 1
Spechtus asked on 26 Jan 2013, 01:16 AM
Hello!
I'm developing a simple app using Icenium Mist. I followed the example on mobile forms page about drop-down list:
http://demos.kendoui.com/mobile/forms/index.html

In the demo it works fine - the drop down shows up and stays there. In my app I can see the drop-down list show for a split second, and it disappears right away. I didn't see any JS errors or missing references.

Markup is simple:
<div data-role="view" data-init="initSignOffForm">
.....
<select id="ddlChild">
<option value="1">Veronique</option>
<option value="2">Michelle</option>
        <option value="3">Griffin</option>
        <option value="4">Boris</option>
</select>
.....
</div>

Then my JS file piece copied from demo page:

function initSignOffForm(){
    var body = $(".km-vertical,.km-horizontal");
    if (kendo.ui.DropDownList) {
        $("#ddlChild").kendoDropDownList({
                // The options are needed only for the desktop demo, remove them for mobile.
                popup: { appendTo: body },
                animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
            });
    }
}

I tried removing the options for the list in JS - same thing...

Compiled and tested in on the phone - blinks the same way as well.

Anyone knows why and how to fix?

7 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 Jan 2013, 12:58 PM
Hi Andriy,

I tested the code you have provided in the following sample (using Q3 SP1 release), and it worked fine in Mobile Safari. Perhaps the problem is specific to Icenium, or to the version of Kendo UI/jQuery you use? Can you provide more details regarding the versions in your case? 

Thank you in advance,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Spechtus
Top achievements
Rank 1
answered on 26 Jan 2013, 07:49 PM
Hi Petyo!
Thank you for the reply - I have tried using Icenium Graphite - same issue. I'm using 2012.3.1315 for all js and css. jquery is 1.8.2
Here's the header of my html:

        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
        <script src="scripts/main.js"></script>

It looks like the issue may be with Icenium, but when I build it and test on mobile device - it's the same - blinks and disappears.

I tried saving the files and running the app in the browser - works fine.
Is it a known issue or something you'd a have a work-around?

Thanks!


0
Jordan
Telerik team
answered on 29 Jan 2013, 02:22 PM
Hello Andriy,

Petyo asked the Icenium team to give a look at your ticket.

As we struggle to reproduce it can you help us by creating new Kendo Mobile project in Icenium then replace index.html content with code bellow.

And tell us:
1. Is it reproducible in simulator. (and if so are you using Mist or Graphite?)
2. Is it reproducible on device (what is the device OS and version?)


<!DOCTYPE html>
<html>
<head>
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <title>Kendo UI JsBin</title>
</head>
<body>
    <div data-role="view" data-init="initSignOffForm">
        <select id="ddlChild">
            <option value="1">Veronique</option>
            <option value="2">Michelle</option>
            <option value="3">Griffin</option>
            <option value="4">Boris</option>
        </select>
    </div>
    <script>
        function initSignOffForm() {
            var body = $(".km-vertical,.km-horizontal");
            if (kendo.ui.DropDownList) {
                $("#ddlChild").kendoDropDownList({
                    // The options are needed only for the desktop demo, remove them for mobile.
                    popup: { appendTo: body },
                    animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
                });
            }
        }
 
        new kendo.mobile.Application();
    </script>
</body>
</html>


Kind regards,

Jordan
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Spechtus
Top achievements
Rank 1
answered on 29 Jan 2013, 04:47 PM
Hi Jordan!
Thanks for you reply!

I created a new project in Mist and replaced index.html as requested. Everything worked fine.
I went then to my project and replaced all local scripts with CDN references from your example - worked fine, but the simulator started to act strange - being requested as Android simulator it would render all content using iOS styles anyway. iPhone simulator works fine.
I have downloaded the scripts from CDN and replaced local ones with them - the problem with drop-down came back but the simulator got back to normal - Android is Android, iOS is iOS...
I used both Mist and Graphite - the problem is the same. I prefer using Mist as I can access it anywhere.
I have installed it on my device (Android 4.1 RAZR MAXX) - the problem is there.

I think there may be something in jquery and kendo.all JSs inside Icenium - they don't work locally, but are fine with CDN. 

Maybe later I can add full copies of the scripts (non-minified) and see if the issue is there and try to debug it...
0
Petyo
Telerik team
answered on 30 Jan 2013, 10:08 AM
Hello Andriy,

Unfortunately, I did not manage to reproduce the problem on our Android 4.1 device - Nexus S. I used icenium graphite and pasted the provided code (without any script downloading). As you already noticed, this means that there should be something more in the project that causes this misbehavior. 

Is it possible for you to extract the problem from your project, so that we can reproduce it on our side? Thank you in advance.

Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Spechtus
Top achievements
Rank 1
answered on 30 Jan 2013, 04:29 PM
Hello Petyo!
Is there a way to share access to my dashboard with you? Or maybe you can let me know the way on how to extract the problem from the project? I can also download all the files from the project and pack it into archive and send it to you.
Please let me know what would be best for you.
Thanks!
0
Alexander Valchev
Telerik team
answered on 01 Feb 2013, 01:20 PM
Hello Andriy,

It would be best if you can isolate the problem into a separate small project, pack it into an archive and send it to us. In order to extract the problem you should remove all the components/custom logic that are not sufficient and replace the remote data (if such) with local one. A good example is Jordan's code snippet - included resources, single View, minimum required components and JavaScript initialization function.

In this way we would be able to reproduce the issue locally, examine what is going wrong and assist you further. Thank you in advance for the cooperation.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Spechtus
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Spechtus
Top achievements
Rank 1
Jordan
Telerik team
Alexander Valchev
Telerik team
Share this question
or