Scrolling through a list of inputs checks the input

7 posts, 1 answers
  1. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 18 Feb 2013 Link to this post

    I know this is an issue on an app for android, (I am not sure about iOS). I have a view with a large number of checkboxes for the user to select multiple items.  However if you attempt to scroll the view down and you touch a checkbox and scroll, that checkbox value will toggle, is there a way to prevent this?

    To reproduce this you can make an view with the following ...
    <ul data-role="listview" data-type="group">
     <li>
      Heading 1
      <ul>
       <li><label><input type="checkbox" checked="checked" />Lettuce</label></li>
       <li><label><input type="checkbox" checked="checked" />Carrots</label></li>
       <li><label><input type="checkbox" checked="checked" />Peas</label></li>
       <li><label><input type="checkbox" checked="checked" />Bread</label></li>
        <!-- repeat until you have enough to fill the whole screen -->
      </ul>
     </li>
    </ul>
    If you try to scroll anywhere except for header you will inadvertently select a checkbox, is there a way to work around this?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 Feb 2013 Link to this post

    Hello David,

    Which Android version and browser are you testing with? Your scenario seems exactly the same as in our online checkboxes demo, however, it works correctly in my side when I add enough ListView items, so that scrolling appears (HTC One X, Android 4.1, default browser and Google Chrome).

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 18 Feb 2013 Link to this post

    I was testing with android 4.2.2 on a Nexus 7 tablet (it is a hybrid application built with icenium).  I have not tested on a phone yet but I will give that a shot and see if it is different.
     -David
  5. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 18 Feb 2013 Link to this post

    I just tested this on a 4.2.2 Nexus 4 phone as well, and the same issue occurs.  I have done a bit more testing, it appears that the scrolling works fine, it is just when you lift your finger any checkbox you were over gets checked.
    -David
  6. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Feb 2013 Link to this post

    Hello David,

    The issue is present in Kendo UI Q3 2012, but is fixed in Q3 2012 SP1 (2012.3.1315). Please upgrade.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. J
    J avatar
    1 posts
    Member since:
    Feb 2013

    Posted 29 Mar 2013 Link to this post

    Hi,
    My team is using Kendo UI Mobile v2012.3.1315 and we have same problem when using dataSource for ListView in PopOver.
    Scrolling through a list of inputs still checks the input on iPad.
    You can modify popover demo to reproduce it.
    Just replace <ul data-role="listview">(...)</ul> with <ul id="listview"></ul> and add this script:
    var data = [
        {name: 'Isabella Anderson'},
        {name: 'Josh Anderson'},
        {name: 'Linda Anderson'},
        {name: 'Oliver Anderson'},
        {name: 'James Williams'},
        {name: 'Barbara Williams'},
        {name: 'Josh Anderson'},
        {name: 'Linda Anderson'},
        {name: 'Oliver Anderson'},
        {name: 'James Williams'},
        {name: 'Barbara Williams'},
        {name: 'Josh Anderson'},
        {name: 'Linda Anderson'},
        {name: 'Oliver Anderson'},
        {name: 'James Williams'},
        {name: 'Barbara Williams'},
        {name: 'Josh Anderson'},
        {name: 'Linda Anderson'},
        {name: 'Oliver Anderson'},
        {name: 'James Williams'},
        {name: 'Barbara Williams'}
    ];
    var dataSource = new kendo.data.DataSource({});
    dataSource.data(data);
    $('#listview').kendoMobileListView({
            template : '<label>Isabella Anderson<input type="checkbox"></label>',
            dataSource: dataSource
        });
    I didn't check if it happens outside popover.
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Apr 2013 Link to this post

    Hi J K,

    Here is a demo, which uses the latest Kendo UI version and works as expected. Please upgrade.

    http://jsfiddle.net/dimodi/xgSAP/2/show/

    You may notice that the discussed problem may occur on the online demos in desktop browsers. This is caused by the mouse events and does not influence mobile browsers on touch devices.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready