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

ListView not working properly after refreshing bound dataSource.

7 Answers 845 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
RodEsp
Top achievements
Rank 2
RodEsp asked on 31 Jul 2012, 07:50 PM
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)

7 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 01 Aug 2012, 07:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RodEsp
Top achievements
Rank 2
answered on 01 Aug 2012, 04:35 PM
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).
0
Petyo
Telerik team
answered on 02 Aug 2012, 06:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RodEsp
Top achievements
Rank 2
answered on 02 Aug 2012, 06:26 PM
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.

0
Accepted
Petyo
Telerik team
answered on 03 Aug 2012, 02:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RodEsp
Top achievements
Rank 2
answered on 03 Aug 2012, 02:35 PM
Heya Petyo,

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

Thanks for your help!
0
Jack
Top achievements
Rank 1
answered on 25 Aug 2012, 12:16 PM
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.





Tags
ListView (Mobile)
Asked by
RodEsp
Top achievements
Rank 2
Answers by
Petyo
Telerik team
RodEsp
Top achievements
Rank 2
Jack
Top achievements
Rank 1
Share this question
or