Unable to scroll on iPad

[Richard]

When I try to scroll an opened dropdownlist on the iPad, it selects the item that was touched in the list and then closes. So to select the actual item that I'm looking for I have to open and scroll n number of times until I reach such item.  Is there a way to differentiate the touch between a drag and a click.  I was thinking about trying to make it cancel the close when the drag event happens.

[Georgi Krustev]

Hello Richard,

 
To enable scrolling of the DropDownList ( popup in particular ) you need to include kendo.mobile.core.js,
kendo.mobile.scroller.js. Check this jsFiddle demo, which shows how to enable scrolling in mobile device.

Regards,
Georgi Krustev
the Telerik team

[Richard]

Great, I'll put these in place and upload the changes to the server sometime today. Will the js files that you said to add affect any functionality if the app is running on a pc? Just wondering if I should check the browser for iOS and load those scripts if so.

[Georgi Krustev]

Hi Richard,

 
The scrolling will be enabled only if the device supports touch events. You can load scripts even when the browser does not support touch events.

All the best,
Georgi Krustev
the Telerik team

[Richard]

I added the scripts and when I tried to run the page I get the following javascript error:

Microsoft JScript runtime error: Unable to get value of the property 'ui': object is null or undefined


Is there a dependency file I should include. Here are the script references that I have on the page:

<script src="../../Scripts/Kendo/Web/jquery.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Web/kendo.all.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.core.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.scroller.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.json-2.3.min.js" type="text/javascript"></script> 
<script src="../../Scripts/JSLINQ.js" type="text/javascript"></script>

[Richard]

I think I may have fixed it, but I will need to get access to an iPad to test and make sure it works. But as far as the js error, it doesn't happen any more. I added the reference to kendo.mobile.min.js and also moved my kendo.all.min.js to the bottom of the kendo script references. I moved it because I was getting an error that selectable was not a property of c.ui, and after the move no errors were thrown. So here are my current kendo script references. I'll post again when I get to test on an iPad and let you know if everything is good. Thank you again for your help in this matter.

<script src="../../Scripts/Kendo/Web/jquery.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.core.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.scroller.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Web/kendo.all.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.json-2.3.min.js" type="text/javascript"></script> 
<script src="../../Scripts/JSLINQ.js" type="text/javascript"></script>

[Georgi Krustev]

Hello Richard,

 
I will suggest you load the kendo.web.min.js instead of kendo.all.min.js. Check the jsFiddle demo what the correct list of JS files is.

Kind regards,
Georgi Krustev
the Telerik team

[Richard]

I just tested on an iPad and the scrolling still did not work. I looked on the jsFiddle demo you sent earlier and used the scripts that they had listed. Any thing else I can try? This is my current list of references:

<script src="../../Scripts/Kendo/Web/jquery.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Web/kendo.web.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.core.min.js" type="text/javascript"></script> 
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.scroller.min.js" type="text/javascript"></script>

[Georgi Krustev]

Hello Richard,

I will suggest you exclude the kendo.mobile.js as it contains all mobile scripts and load only the ones for scrolling:

<script src="../../Scripts/Kendo/Web/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/Kendo/Web/kendo.web.min.js" type="text/javascript"></script>
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.core.min.js" type="text/javascript"></script>
<script src="../../Scripts/Kendo/Mobile/kendo.mobile.scroller.min.js" type="text/javascript"></script>

Check the correct list of scripts in the jsFiddle demo.

 

Regards,
Georgi Krustev
the Telerik team

[Richard]

When I exclude kendo.mobile.min.js I get an error in kendo.mobile.scroller.min.js. The error occurs on "d=c.mobile.ui" where mobile is undefined. But when I included kendo.mobile.min.js it ran without error. So I'm not sure what to do. Does it matter that I'm developing and testing on a PC, instead of testing on the iPad?

And for the jsFiddle scripts, do you mean the scripts that are listed under "Manager Resources"? If so, I have included those 3 scripts.

[Gestudio]

I am experiencing the same problem now, is there any fix published?

This is my html5 example: https://www.flylogs.com/users/signup/

The country drop down cant be used in any iOS, including iphones.


<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" />



<script type="text/javascript" src="/js/kendo/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/js/default/excanvas.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.history.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.tipsy.js"></script> <script type="text/javascript" src="/js/kendo/javascript/kendo.web.min.js"></script>
<script type="text/javascript" src="/js/kendo/javascript/kendo.mobile.core.min.js"></script>
<script type="text/javascript" src="/js/kendo/javascript/kendo.mobile.scroller.min.js"></script>
<script type="text/javascript" src="/js/default/init.js"></script> I've take a look at my iphone's safari with javascript debug on and it returned this error: JavaScript: Error undefined; ReferenceError: Can't find variable: iPhone Hope it helps for an early fix!

[Kamen Bundev]

Hi,

I wasn't able to reproduce the JavaScript error you mentioned and the dropdown actually works in iPad. However scrolling doesn't work in iPhone, but this is because the touch events do not get prevented for some reason. The good news is that Q1 2012 release is this week and the mobile scroller will be officially supported and integrated, so no need to include any additional scripts besides kendo.web.min.js. Can you try upgrading and report back if the issue is still present?

Kind regards,
Kamen Bundev
the Telerik team

[Jeffrey]

any update on this. If I add Kendo.mobile.scroller.min.js controls won't initialize on ipad althought they display fine on PC in safari or any other  browser. If I add kendo.mobile.min.js I get javascript errors on my kendo listview objects.

[Georgi Krustev]

Hello,

 
Here is a jsFiddle demo which uses the scripts from the Q1 2012 release. Everything works as expected on my end.

Kind regards,
Georgi Krustev
the Telerik team

[Jeffrey]

Ok got dropdown working by adding ref  to kendo.mobile.min.js. This works fine on pc and Ipad with just a dropdown on the page. However, if i then try to use a kendo listview on page as well and set selectable = "multiple" i get a javascript error at line " a.selectable=new c.ui.Selectable(a.element,{multiple:b,filter:i,change:function(){a.trigger(d)}})". if I remove  ref to kendo.mobile.min.js then both controls render correctly on both platforms  but dropdown scrolling does not work correctly anymore on ipad. If i leave ref to mobile js and remove selectable property setting it works fine except that listview is only single select. Any thoughts on a work around? 

[Petyo]

Hello,

Indeed, including the whole Kendo UI Mobile script can cause that. Can you please try including only the mobile scroller script (find attached), and let us know if it works? 

Regards,
Petyo
the Telerik team

[Jeffrey]

Yes that works ( once I realized i had kendo.mobile.scroller.min.js referenced before the web.min.js and corrected)

[Layla]

I was having similar issues as Jeffery . I also had kendo.mobile.scroller.min.js referenced before the web.min.js .

Thank you Telerik team for your assistance.
__________________________________
Backpacking Tents

[Swetha]

I am using the mobile scroller and cant get it to work.I havealready set height for the scroll element.  
I am using the trail edition and these are the references i am using.


 <link href="Kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="Kendo/js/jquery.min.js" type="text/javascript"></script>      
 <script src="Kendo/js/kendo.web.min.js" type="text/javascript"></script>
 <script src="Kendo/js/kendo.mobile.scroller.min.js" type="text/javascript"></script>
  <script src="Kendo/js/kendo.all.min.js" type="text/javascript"></script>

  Am I missing something here?

Thanks in advance.