Listview disappears in android app

[Ron]

We have an app that uses listview with remote datasource. The app worked well and we recently updated it to use latest kendo (commercial) and cordova 3.2.0 Since then we have a very strange behavior of the listview with Android devices (with iOS it all works well):
The first time we reach the view with the listview, it does not appear.But we found that if we do one of the following somehow the listview shows up:
- if we add alert("anything") right after the kendoMbolieListView line OR
- if we change to any other view and then come back to the view with the listview

And more insights: When we run the app using Android emulator it works well and we do see the listview but when we run it on device this is when we experience this problem (for example - Google Nexus 7 with Android 4.4.2)

Listview is created using the following code:

$("#events-list").kendoMobileListView({
        dataSource: dayDataSource,
        template: $("#eventTemplate").html()        
     });

Any ideas how to solve the strange issue will assist (of course we do not want to alert anything in production app)

[Kiril Nikolov]

Hello Ron,

This issues sound like a rendering problem. Would it be possible to extract a runnable sample reproducing the problem, so we can take a look at?

I am looking forward your reply.

Regards,
Kiril Nikolov
Telerik

[Ron]

Kiril,

Please look at the following:

http://jsbin.com/IkEWUSa/1/edit



 It works correctly in chrome and we can see there the listview but this is not the case in Android

[Kiril Nikolov]

Hi Ron,

I have copied your code and deployed in on Nexus 5 phone running Android 4.4.2 using Icenium and the ListView was displayed as expected. Please check the following screencast, showing it:

http://www.screencast.com/t/u0dDXz6W

Regards,
Kiril Nikolov
Telerik

[Ron]

Thanks Kiril - I'm afraid this is not the case on our device.  We also have it working well both on iOS devices and on Samsung Galaxy S3 running Android 4.1.2
But on our Nexus7 running Android 4.4.2 the list view is not rendered initially and we need to change view and return (or there is the alert "trick" mentioned above). Looks like our Nexus 7 is slower than the other devices and maybe this has something to do with it.

We added a little more code to the previous example and you can now change the displayed data using the arrows next to the date header. We had a case (also with Android 4.4.2) in which the first response was displayed correctly (as you experienced) and then trying to change the data it disappeared (upon clicking one of the arrows) and only changing the view and return solved it:

http://jsbin.com/IkEWUSa/6/edit

I hope you will now be able to experience the problem we are having. However if it still works well for you - is there any idea what we can try to do to solve it?

[Kiril Nikolov]

Hello Ron,

Thank you very much for providing this example it helped a lot in narrowing down the issue.

The problem comes from the fact that you are initializing the ListView widget every time you call the changeListviewDay() method. This is not supported, as it overrides the widgets and can cause unexpected behavior, such as ListView disappearing. The simplest solution is to detect if the widget is created and if its created use the setDataSource() method to change its dataSource, or if its not created - then simply created it. 

I was able to reproduce this issue on a Nexus 7 and Android 4.4.2, but after the above mentioned fix the issue disappeared. Please note that you will need to deploy it on the device, as the jsBin might not work as expected:

http://jsbin.com/AnEbecOb/1/edit

Regards,
Kiril Nikolov
Telerik

[Ron]

Thanks Kiril - unfortunately on our device it made no change. We did exactly as you wrote and still nothing - the listview only appeared after we changed to other view and then returned.
We did have a small progress and found that if we comment the code at the beginning of changeListviewDay function which test for the app status (if (app === undefined || app === null)) we do get the first listview datasource presented. I have no idea why commenting this code has such a result as in both cases we reach the code following this "if" block but that's the way it is.
So now we do have the listview presented for the first time in which we create the new datasource but then when we change the date with the arrows and set the listview datasource as you did, the listview is not rendered until switching views.

Do you have any other idea? As mentioned before - the same code works well on iOS and even on other Android devices.
Can you let us know what version of Cordova Phonegap did you use for your test?

[Kiril Nikolov]

Hi Ron,

I have once again tested the code that I sent you in my previous response in Icenium with Cordova 3.2 and Nexus 5 device running Android 4.4.2. Please see the video attached:

http://www.screencast.com/t/E9Jqq8kU

The issue with the ListView disappearing is often caused by multiple initialization of widgets or applications. Please check in your project and make sure that you create only one instance of Kendo UI Mobile application, and make sure that you do not create one and the same widget more than once.

The code that you commented and made a change in your application is the one that determines if you already have an application created, if I am not mistaken? Make sure that you instantiate the app just once.

Regards,
Kiril Nikolov
Telerik

[Ron]

Hello Kiril,

Our code is relatively simple and follows everything you wrote. Specifically, we only create one instance of kendo UI Mobile application. We create the widget only once.

What we also know is:

- The code works perfectly well on various devices - both ios and android. On Nexus 7 with Android 4.2.2 we have the listview problem
- We use cordova 3.2 with kendo 2013.3.1119.commercial We also tried using latest kendo (2013.3.1316.commercial) but the results were the same
- The listview only appears the first time we reach the view. The next calls to update the listview datasource in the same view results with empty listview rendered on the Nexus 7.
- When we have the empty listview on the Nexus we can solve it by changing to other view and the return to the view with the listview - this fixes the rendering problem

In the bottom line there is some kind of a problem with rendering the listview and we already spent a lot of time trying to figure it out. From your experience with such rendering problems - Do you have any other idea what we can try?

Thanks,
 Ron.

[Kiril Nikolov]

Hello Ron,

I have tested the code again with Nexus 7 running Android 4.4.2 (as I have tested it on Nexus 5 with 4.4.2) thinking that there might be something different in the platforms, but again the code worked as expected. 

Unfortunately I run out of suggestions, what might be the reason for the problem that you are facing. Please try removing all custom CSS files and other libraries and test your project again, make sure that you do not create multiple widgets or applications and test again. Please let me know about your progress.

Regards,
Kiril Nikolov
Telerik

[Ron]

Hello Kiril,

I'm happy to say that the cause for the problem was found. It was all originated from android:hardwareAccelerated
Once we set it to false the problem was solved. It looks like this was added to Kendo's getting started guide after we started to use it and that's why we were not aware of it (old code that was moved forward with the time):
http://docs.kendoui.com/getting-started/mobile/performance

Thanks for spending the time trying to figure it out and for the ongoing great support, we really appreciate it.

Ron.

[Kiril Nikolov]

Hi Ron,

I am glad you found the solution!

The suggestions that I have made - initializing the widgets and the app are still valid, so please follow this pattern as it will prevent from some unexpected errors.

If any questions arise, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik