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

What is the correct method to Bind events to <a> and <li> List elements?

3 Answers 104 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Damien
Top achievements
Rank 1
Damien asked on 28 Jan 2013, 12:53 AM
Hi Kendo gurus,

 I am wondering if I am doing something wrong.

Basically I have a couple of functions that check localStorage session variables and I want to  bind the events to list elements within my Kendo mobile application. 

I have a list view like so: KENDO LIST HTML
 <li data-icon="globe"><a href="#page1">Page 1</a></li>
<li data-icon="reply"><a href="#page2">Page 2</a></li>
<li data-icon="settings"><a href="#page3">Page3</a></li>

Then a function that checks if the user is a guest, and re-directs them: JS:
  function checkSession() {
     if (localStorage.getItem("guest") == "true") {app.navigate('#pleaseregister');}else {app.navigate('#page1');}
    };



I've tried:  
#1. <li data-icon="globe"><a href="#" onClick="checkSession();">Page 1</a></li>
and:
#2. <li data-icon="globe"><a href="#" data-click="checkSession">Page 1</a></li>
#3. <li data-click="checkSession" data-icon="globe"><a href="#" >Page 1</a></li>

In example 1, onClick events fire in the web browser/emulator  but not on physical device, it appears very unresponsive.
Example 2+ 3 does not work at all.

When I use a button like so: 
<a data-icon="toprated" data-click="checkSession"  data-role="button" style="width:90%; height:30px;">Create Listing</a>

It works! But I like the look of the list view. 

If you could let me know if there is a special way of doing this, it would be very much appreciated, I've noticed several Kendo UI users on here asking this question and there doesn't seem to have been an answer given? It's driving me crazy. 

Regards,

Damien.

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Jan 2013, 01:55 PM
Hi Damien,

Thank you for contacting us.

I suggest you to use the build-in click event of the ListView widget. Here is an example.

Have in mind that click event triggers when the user taps anywhere in the ListView item. If you want to catch the tap/click on a particular item from the ListView template please consider using the Touch component.

I hope this will help.

Best regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Damien
Top achievements
Rank 1
answered on 02 Feb 2013, 10:45 PM
Alexander,

Thanks for your response and your working solution, that is exactly what I was after. 

One more question - I am using the same syntax and method to bind actions to a tabstrip icon on my navbar and having issues.
Is there a way to bind a method that runs when a tabstrip-home or tabstrip-xxx is pressed? Doesn't appear to work.

If there is an issue is there a workaround?

Await your response

Regards Damien
0
Alexander Valchev
Telerik team
answered on 06 Feb 2013, 05:40 AM
Hello Damien,

TabStrip has a select event which fires when tab is selected. Did you tried the following?

<div data-role="tabstrip" data-select="onSelect">
    <a href="#foo">foo</a>
    <a href="#bar">bar</a>
</div>


Best regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Damien
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Damien
Top achievements
Rank 1
Share this question
or