Select event tabstrip

5 posts, 0 answers
  1. Jolien
    Jolien avatar
    6 posts
    Member since:
    Jun 2012

    Posted 08 Jun 2012 Link to this post

    Hi, 

    I can't get the select event on the tabstrip working. It should log a console message that the select event was fired, but it does nothing. What am I doing wrong?

    HTML markup:
    <div data-role="layout" data-id="mobile-tabstrip">
        <div data-role="footer">
            <div data-role="tabstrip" id="tabStrip">
                <a href="#user" data-icon="contacts">User</a>
                <a href="#cycle" data-icon="play">Cycle</a>
                <a href="#stats" data-icon="toprated">Stats</a>
                <a href="#settings" data-icon="settings">Settings</a>
            </div>
        </div>
    </div>

    JS code:
    var tabstripBound = false;
            var app = new kendo.mobile.Application($(document.body), {
                platform : "android",
                viewShow: function() {
                     if (!tabStripBound) {
                     var tabStrip = $("#tabStrip").data("kendoMobileTabstrip");
                     tabStrip.bind("select", onSelect);
                     tabStripBound = true;
                     }
                  }
            });
             
            function onSelect(item){
                console.log("In on select");
            }
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 11 Jun 2012 Link to this post

    Hello Jolien,

    To achieve the needed functionality I would suggest to use the declarative event binding syntax and the data-select attribute for the TabStrip. For example: 
    <div data-role="layout" data-id="mobile-tabstrip">
        <div data-role="footer">
            <div data-role="tabstrip" id="tabStrip" data-select="onSelect">
                <a href="#user" data-icon="contacts">User</a>
                <a href="#cycle" data-icon="play">Cycle</a>
                <a href="#stats" data-icon="toprated">Stats</a>
                <a href="#settings" data-icon="settings">Settings</a>
            </div>
        </div>
    </div>
     
    ....
    <script>
        function onSelect(){
            console.log("In on select");
        }
    </script>

    I hope this helps.


    Regards,
    Iliana Nikolova
    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. Jolien
    Jolien avatar
    6 posts
    Member since:
    Jun 2012

    Posted 12 Jun 2012 Link to this post

    Hi,

    I can get this working for Android 2.x, but not for the 4.x version. 
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 12 Jun 2012 Link to this post

    Hello Jolien,

    I tested your scenario on Android 4.x version and everything works as expected. For convenience, I attached my test project - please check it and let me know if I missed something. Thank you in advance.


    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 18 Oct 2012 Link to this post

    OK disregard my post as I found the issue -= my script was outside body so events could never call functions.

Back to Top
Kendo UI is VS 2017 Ready