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

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

3 Answers 71 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jari
Top achievements
Rank 1
Jari asked on 07 Apr 2014, 12:54 PM
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>

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 08 Apr 2014, 10:38 AM
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!
 
0
David
Top achievements
Rank 2
answered on 07 Oct 2014, 10:43 PM
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?
0
Kiril Nikolov
Telerik team
answered on 08 Oct 2014, 11:58 AM
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!
 
Tags
ListView (Mobile)
Asked by
Jari
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
David
Top achievements
Rank 2
Share this question
or