Unable to scroll on iPad

19 posts, 0 answers
  1. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 21 Feb 2012 Link to this post

    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.
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 21 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 22 Feb 2012 Link to this post

    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.
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 22 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2012 Link to this post

    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>
  6. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2012 Link to this post

    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>
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 23 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 23 Feb 2012 Link to this post

    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>
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 24 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Richard
    Richard avatar
    17 posts
    Member since:
    Sep 2012

    Posted 24 Feb 2012 Link to this post

    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.
  11. Gestudio
    Gestudio avatar
    1 posts
    Member since:
    Jan 2012

    Posted 17 Mar 2012 Link to this post

    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!
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Jeffrey
    Jeffrey avatar
    6 posts
    Member since:
    May 2009

    Posted 28 Mar 2012 Link to this post

    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.
  14. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 29 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Jeffrey
    Jeffrey avatar
    6 posts
    Member since:
    May 2009

    Posted 29 Mar 2012 Link to this post

    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? 
  16. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 30 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Jeffrey
    Jeffrey avatar
    6 posts
    Member since:
    May 2009

    Posted 30 Mar 2012 Link to this post


    Yes that works ( once I realized i had kendo.mobile.scroller.min.js referenced before the web.min.js and corrected)
  18. Layla
    Layla avatar
    1 posts
    Member since:
    Apr 2012

    Posted 13 Apr 2012 Link to this post

    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
  19. Swetha
    Swetha avatar
    1 posts
    Member since:
    Apr 2012

    Posted 13 Apr 2012 Link to this post

    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.

Back to Top