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

4 posts, 0 answers
  1. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 27 Jan 2013 Link to this post

    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.

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 28 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 02 Feb 2013 Link to this post

    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
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready