ListView not working properly after refreshing bound dataSource.

[RodEsp]

I have an example of this here: http://jsfiddle.net/RodEsp/hjbSz/
Using jsfiddle echo to simulate a remote datasource.

Basically, if the dataSource is initialized with data from the beginning (un-comment the //url: "/echo/json/", line) then everything works perfectly and the listview's <li> elements get initialized properly.

But, if you keep the dataSource empty from at the beginning and then change it by pressing the Refresh button on the navbar, the listview is populated and shows up correctly, but the listview's <li> elements do not get initialized the way they should. They have no data-uid property.

Is this a bug, or am I doing something wrong?

(In my real application this happens when the JSON retrieved for my datasource is an empty array and then is refreshed and recieves a non-empty array)

[Petyo]

Hi Rodrigo,

Such problem was present in our previous Q1 release, but I think we resoved it for our Q2 release. 

I did the following jsfiddle update in order to check it, it looks like the listview items have their uid set properly:

http://jsfiddle.net/7WVqL/71/
 
Please notice, that I also used one new configuration on the mobile list view - auto-bind, and set it to false, in order to simulate what you describe. 

All the best,
Petyo
the Telerik team

[RodEsp]

Hi Petyo,

Setting auto-bind to false works like a charm, but there is still a little issue.

The scenario where the data-source will recieve an empty JSON array/object at initialization is only one possible case.
Most of the time it will recieve a full JSON array/object upon initialization and in those cases I want the listview to display or populate itself automatically, without the user having to hit a button or anything of the sort.

I've tried "refreshing" the data-source by calling dataSource.read(); in several different parts of the code, such as right before navigating to the view where my listview is, or setting dataSource.read(); in the data-show or data-init events of the view but then I run into the same issue. If I start out with an empty array assigned to the dataSource, after refreshing, I encounter the exact same problem.

Another thing is: If I initially get an array with X number of items, then any refresh after that populates the listview correctly, no matter if I get empty arrays or arrays with different items or arrays with more or less items. So I can do something like this and it works perfectly fine INITIALIZE ARRAY[3] -> REFRESH -> GET ARRAY[0] -> REFRESH -> GET ARRAY[2] -> REFRESH -> GET ARRAY[5]...

I'm going to try to make a more robust scenario on jsfiddle using mockajax.

Oh, and sorry for not using the most up-to-date Kendo scripts. I always seem to forget to update those in jsfiddle
(I am using the 2012.1.515 styles because of another issue with <input> tags in Android and I don't believe this has any effect on the issue discussed here).

[Petyo]

Hello Rodrigo,

I see - indeed, the case you describe might trigger such problem. However, a case to reproduce it is needed. 
Looking forward to your response. 

All the best,
Petyo
the Telerik team

[RodEsp]

Hi Petyo,

I've updated my jsfiddle to reflect the information on my last post.
http://jsfiddle.net/RodEsp/hjbSz/ 

If this is a bug, it's a consistent one. If you set data-auto-bind="false" and then hit the "Refresh Zero" button to initialize the dataSource with an empty array you get the same broken behavior if you hit Refresh One or Refresh Two afterwards.
Same as if you just initialize the dataSource with the "data/0" url without setting data-auto-bind="false" on the listview.

My current work around involves refreshing the webview with window.location.reload(); immediately after calling .read() on the data source. This works fine but you get the ugly "refresh" blink, and when working in a mobile application that makes it so you see the view before the listview view (in this jsfiddle case it would be #v0).

Thanks again Petyo.

[Petyo]

Hello Rodrigo,

As I suspected, indeed this  seems to be a problem on our side. I am glad to inform you that we managed to fix it in our latest internal build. You may give it a try.

I am updating your telerik points for reporting this problem and for the test case provided. Many thanks for your cooperation. 

Kind regards,
Petyo
the Telerik team

[RodEsp]

Heya Petyo,

That's excellent. I hope those telerik points are redeamable for Kendoui T-shirts haha.

Thanks for your help!

[Jack]

There is also a problem when the list view is built programmatically as follows.

HTML:

<div id="item-edit" data-role="view" data-model="app.viewModel" data-show="app.onItemEditDataShow">

    ...
   <ul id="item-edit-listview" data-role="listview" data-style="inset"></ul>

</div>

Javascript:

app.onItemEditDataShow = function(e) {

    //load item to display

    var itemID = e.view.params.itemID;

    app.viewModel.loadCurrentItem(itemID);

    //empty form

    var form = $('#item-edit-listview');

    form.empty();

    //load fields

    var fields = app.viewModel.get('fields');

    for (var i= 0; i<fields.length; i++)

    {

        var f = kendo.format('<li><input type="{0}" data-bind="value: currentItem.{1}" />{2}</li>', fields[i].type, fields[i].key, fields[i].label);

        form.append(f);

    }

    //bind form

    kendo.bind(form, app.viewModel);

};

At any point calling:

form.refresh();

removes all the fields programmatically added to the ListView instead of just refreshing the bindings.