[Android] Pull to refresh spinner goes on and on and on...

[Kai]

Hi there,
i made an iOS App, where I´m using the Mobile List View and Pull to refresh, without any Problems.

After porting my App to Android I ran into problems with the loading spinner. There is no Javascript error and the content gets refreshed as expected but the spinner isn't hiding after the refresh. My Code looks like this:

01.var dataSource = new kendo.data.DataSource({
02. transport: {
03.read: {
04. url: "URL.TO.MY.SERVER",
05.contentType: "application/json; charset=utf-8",
06.type: "GET",
07.dataType: "jsonp",
08.data: {
09.foo: "bar",
10.type: "start",
11.device: deviceID
12.}
13.}
14.}
15.});
16.
17.$("#listView").kendoMobileListView({
18.          dataSource: dataSource,
19.          template: kendo.template($("#template").html()),
20.          pullToRefresh: true,
21.          pullTemplate: "Zum Aktualisieren runterziehen",
22.          releaseTemplate: "Zum Aktualisieren loslassen",
23.          refreshTemplate: "Aktualisiert..."
24.});

Tested Devices:
HTC ONE - Android 4.0.3 (real device)
NEXUS ONE - Android 4.2.2 (AVD)

[Alexander Valchev]

Hi Kai,

I am afraid that the provided information is not sufficient enough in order to determine where exactly the problem comes from. I tried to reproduce the behaviour in this demo, but to no avail.

Generally speaking, Kendo UI Mobile applications are cross-platform meaning that the same configuration should work on both iOS and Android devices. You can observe the behaviour if you browse the demos on a different mobile devices.

• http://demos.kendoui.com/mobile/m/index.html
  
  

Is it possible for you to provide a small but runnable example that isolates the problem? In this way I would be able to examine your configuration in details and assist you further.
Thank you in advance for the cooperation.

Kind regards,
Alexander Valchev
the Telerik team

[Kai]

Hello Alexander,
i´ve put the Code in a jsFiddel http://jsfiddle.net/f9nqu/63/

Doesn't seem to make a difference in iOS or Android here. But should be enough to get an idea of my problem.

Thanks
Kai

[Alexander Valchev]

Hello Kai,

The ListView automatically wraps the template content in <li> tag. Putting a <li> tag inside the template creates invalid nesting of elements and causes the error. This is written in the corresponding documentation.

To fix the issue, please replace the <li> element with a <div>:

<script type="text/x-kendo-tmpl" id="template">
    <div id="${newsid}" data-enabled="${enabled}">
        <img ${image} />
    </div>
</script>

Also do not forget to remove the CSS rule that hides the original <li> element.
For your convenience I updated the jsFiddle sample: http://jsfiddle.net/valchev/f9nqu/65/

Kind regards,
Alexander Valchev
the Telerik team

[Kai]

Thanks a lot Alexander, I hadn't thought about debugging the template!