Data-source update during scrolling crashes ListView on iOS7.1/iPhone 4

4 posts, 0 answers
  1. Jari
    Jari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 07 Apr 2014 Link to this post

    Hi,

    In my app I have a ListView with a data-source that is bound to a local data array. I get new data from the network and update the array accordingly. Then I call datasource.read to update the ListView.

    This seems to work fine with Android (Samsung Galaxy S3) and WP8 (Lumia 925), but with iOS 7.1 (iPhone 4), if I'm performing ListView scrolling at the same time the update occurs, usually the ListView hangs completely (crashes).

    I can overcome this problem by preventing data-source updates during scrolling, but I guess this behavior could be somehow improved in Kendo Mobile too?

    You should be able to reproduce this problem with the small sample program found below.

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
    </head>
    <body>
       
       
        <div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">
            <ul id="flat-listview"></ul>
        </div>
     
     
        <div data-role="layout" data-id="databinding">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
     
            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#flat" data-icon="stop">Flat
                </div>
            </div>
        </div>
     
        <script type="text/x-kendo-template" id="customListViewTemplate">
            <h3 class="item-title">${name}</h3>
            <p class="item-info">${foo}</p>
        </script
           
        <script>
     
          var flatData = [];
          var flatDs;
     
            function initData() {
                for( var i=1; i<21; i++) {
                    flatData.push({ name: "Initial " + i, foo: new Date()});
                }
            }
     
            function mobileListViewDataBindInitFlat() {
                initData();
                 
                flatDs = new kendo.data.DataSource({
                    data: flatData
                });
     
                $("#flat-listview").kendoMobileListView({
                  dataSource: flatDs,
                  template: $("#customListViewTemplate").html()
                });
               
               setTimeout(function() { updateData(); }, 3000 );
            }
     
            function updateData() {
     
                var r = Math.floor((Math.random()*flatData.length)+1);
                if( r < (flatData.length / 2)) {
                    console.log('update');
                    flatData[r].foo = new Date();
                }
                else {
                    console.log('insert');
                    flatData.push({ name: "Inserted " + (flatData.length +1), foo: new Date()});
                }
                flatDs.read();
                setTimeout(function() { updateData(); }, 3000 );
            
           
        </script>
     
        <script>
            var app = new kendo.mobile.Application(document.body);
        </script>
     
    </body>
    </html>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 08 Apr 2014 Link to this post

    Hi Jari,

    The problem is caused by the fact that the scroller does not know where to position itself and this breaks the ListView functionality. In order to overcome this issue, you will need to manually reset the scroller when you update its data. And this is how you reset the scroller:

    $('[data-role="listview"]').data("kendoMobileListView").scroller().reset()

    Regards,
    Kiril Nikolov
    Telerik
     
    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
    27 posts
    Member since:
    Jun 2014

    Posted 07 Oct 2014 Link to this post

    I'm experiencing this a lot in my grids when viewed from iPad Safari. Completely locks up the scrolling on the grid.

    Is there a similar solution on this?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 08 Oct 2014 Link to this post

    Hi David,

    Would it be possible to open a separate support request with more information on what exactly your Grid implementation is and what is the issue that you are facing, so we can better understand it?

    We will be happy to help!

    Regards,
    Kiril Nikolov
    Telerik
     
    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