I'm building a mobile application using Phonegap and Kendo UI. I have 2 mobile listviews in my application, one list has only one element, and the other has about 100. I've noticed that when I tap the list with only the single item and drag down slightly, the click event on the list item won't fire, yet it still navigates to the next screen when this happens.
The template for my listview looks like this:
<script type="text/x-kendo-tmpl" id="list-template">
<div class="notice" data-id="\#id">
<a href="\#another-page">
<div class="table-cell">
<div class="notice-list-header">
<h3 class="notice-list-date">#:start_date#</h3>
</div>
<div class="notice-list-body">
<p class="list-meta">#:title#</p>
</div>
</div>
</a>
</div>
</script>
I think what's happening is because of the anchor tag in the template it still navigates to the page its supposed to, but because I have code in the click event to populate the page that the list item navigates to, I end up with a blank page because the click event hasn't fired.
I don't have this problem with the other listview that has several items, so my guess is that when a listview is scrolled kendo internally prevents the default behaviour of the list item, which in this case in an anchor tag.
I tried to work around this by removing the anchor from my template and then used navigate() in the click event of the list item, which does work, but when I do it this way, an extra click event is fired on the page that is navigated to so the first item on that page is automatically clicked.
5 Answers, 1 is accepted
Hello Josh,
the workaround you mention in the last paragraph is actually the recommended means to implement the behavior. What's present in the next view? In general, form elements will react to the native click event, which is delayed with 300ms after the "fast" one occurs.
Regards,
Petyo
Telerik
Rank 1
Hi Petyo,
The next view contains a filterable listview, so either the search input is clicked or one of the listview elements is clicked. It seems like this only happens when navigate() is used in the click event of a listview item, because I use the function elsewhere in the app without any problems.
Is there anything else I can try?
Hello Josh,
this is a known issue, which occurs with the native form elements (like the input you mention). So far, we haven't discovered any reliable means to address it. You may delay the navigation call with setTimeout, but this will decrease the tap responsiveness of the source view.
One simple trick that usually works is to enable transitions between the two views. Usually, the click event is swallowed by the transition.
Regards,
Petyo
Telerik
Rank 1
Hi Petyo,
I know this is an old thread now, but I was wondering if this known bug has been fixed? I've discovered that I can't use transitions because they aren't firing on some of our user's devices (and are clunky when they do work). So now I have a situation where either form controls on the next view are triggered when a user taps a listview item or I use transitions so this "ghost click" event doesn't fire, but then the transitions don't work reliably.
I assume since this was a known issue, it may now be fixed in a new release? If not I may need another work around suggestion.
Thanks,
Josh
the issue is not addressed, as it is a fundamental flaw with the fast click emulation in general. I am afraid that we are not aware of any other workarounds.
Regards,
Petyo
Telerik