Issue with ScrollView not updating after updates to a local data source

[Artie]

We are using a ScrollView bound to a local data source that is configured to show multiple items per page.  I ran into an issue today where it looked like the ScrollView was not refreshing its contents after an item in the data source had been updated via .set().  However, I discovered purely by accident that if you scroll two pages to the right and then scroll back two pages to the left, the ScrollView will have magically picked up your changes and re-rendered the items.  I've put together a Fiddle that demonstrates this behavior:

http://jsfiddle.net/rmaezowx/

If you push the "Make Yellow" button, nothing seems to happen even though the data source has been properly updated.  If you then swipe from the right twice, and then to the left, you will see what I'm talking about.  This looks like a bug in the ScrollView, is there any other workaround besides re-setting the data source (I haven't tried this yet)? 

 

[Alexander Valchev]

Hello Artie,

The behaviour occurs because unlike other Kendo UI widgets the ScrollView does not listen for the change event of the DataSource. As a result it does not automatically refresh when the data in the DataSource changes.

As a workaround you may call the scrollTo method. 

function makeYellow() {
    clientsDataSource.data()[0].set("Color", "yellow");
    $("#scrollview").getKendoMobileScrollView().scrollTo(0);
}

Regards,
Alexander Valchev
Telerik

 

 

[Artie]

That's exactly what I needed, thanks!