Determining which tab was pressed in tabstrip handler

17 posts, 0 answers
  1. Anker Berg-Sonne
    Anker Berg-Sonne avatar
    37 posts
    Member since:
    Sep 2009

    Posted 09 Apr 2012 Link to this post

    I have tried to figure out how to determine which tab in a tab strip was clicked in a select handler, but no luck so far. I need this in order to close some windows that only should be visible when one of the tabs is open.

    Any help will be appreciated.

    Thanks/Anker
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Apr 2012 Link to this post

    Hello,

    You can use the Tabstrip currentItem method. Just in case, do you refer to the mobile tabstrip widget? 

    All the best,
    Petyo
    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. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 10 Jul 2012 Link to this post

    I am having the same problem determining which tab was selected.
    I do have an event handler which gets called and passes in the tab "item".
    However I can not figure out how to inspect that item.

     function onTabSelect(item) {
                    var myTabItem = $(item); // wrapped or not - no difference
                    alert(myTabItem.length); // returns "1"
                    alert($(myTabItem).index); // returns "function(a) {...}
                    alert($(myTabItem).index()); // returns "-1"
                }

    this does show me the tab Item prior to being selected (current):

                function onTabSelect(item) {
                    var curItem=   $("#tabstrip").data("kendoMobileTabStrip").currentItem();
                    alert(curItem.index()); // show tab Index
                    alert(curItem.text()); // shows tab text                
                }

    my question is how can I get the text value of the SELECTED tab?

    Thanks
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 13 Jul 2012 Link to this post

    Hello Don,

    To retrieve the text value of the selected tab you could use the following code:
    function onSelect(e) {
        this.currentItem().text(); //previous selected
        e.item.text(); //newly selected
    }

    I hope this helps.

    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!
  6. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 13 Jul 2012 Link to this post

    Awesome; This really helped alot.

    I have a page that binds data to a grid but would only bind the first time the tab was selected, not after any other time(s).
    (page views are 'remembered' so the init event is only called once)

    now I can re-draw the grid and manage Tab selection using a 'Back' button on the TitleBar.
    My thanks to the great Telerik team.

          var tabIndex = 0;
          function fixTab() {
                    //alert("BACK Clicked");
                    var jumpTo = "#";
                    switch(tabIndex)
                    {
                        case 1: jumpTo="#custRevenue"; break;
                        case 2: jumpTo="#branchUnits"; break;
                        case 3: jumpTo="CameraTest.html"; break;
                        default: break;
                    }                
                    $("#tabstrip").data("kendoMobileTabStrip").switchTo(jumpTo);
                }            
                
            function onTabSelect(e) {
                    tabIndex = this.currentItem().index();    
                    if ( e.item.text() == "Customer Revenue")  { 
                         ACR.init("CustRevenue", year, branchID);   
                     }
                }
  7. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 17 Jul 2012 Link to this post

    I see you have a new data- function, "data-show"
    This is actually a more elegant solution for me as it handles the fact the view is retained but allows a (init) function to be called.

    very nice.
    you guys are really doing a great job on this product and putting alot of thought into the details.

    THANKS
  8. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 18 Oct 2012 Link to this post

    can some put in the code to show how to call the select event.

    I have tried putting it in the tab div, in each tab and cannot seem to get an event to fire.

    I have tried select="onSelect" and data-select="onSelect" but nothing.

    This is probably super simple, just not seeing it.
  9. Don
    Don avatar
    38 posts
    Member since:
    Oct 2006

    Posted 18 Oct 2012 Link to this post

    here is the tab declaration: (mine is in a pre-defined Layout )

            <div data-role="layout" data-id="defaultLayout">
                <div data-role="footer">
                    <div data-role="tabstrip" id="tabstrip" data-select="onTabSelect">
                        <a href="#home" data-icon="search">Branch Lookup</a>
                        <a href="#branchSummary" data-icon="reports">Branch Details</a>
                        <a href="#ytdSummary" data-icon="chart">YTD Charts</a>
                        <a href="#branchUnitDetails" data-icon="organize">Branch Units</a>
                    </div>
                </div>
           </div>  

    JS code:
            // this is really all you need to fire the handler.

             function onTabSelect(e) {
                    tabIndex = this.currentItem().index(); // store-it                 
                }  

            // I save the index as use it elsewhere when needed to synch the Tab based on internal links
            // switchTo() does not cause a navigation event, only sets the selected Tab item
             function fixTab() {
                    var jumpTo = "#";
                    switch(tabIndex) {
                        case 0: jumpTo = "#"; break;
                        case 1: jumpTo = "#branchSummary"; break;
                        case 2: jumpTo = "#ytdSummary"; break;
                        case 3: jumpTo = "#branchUnitDetails"; break;
                        default: break;
                    }

                    $("#tabstrip").data("kendoMobileTabStrip").switchTo(jumpTo);
                }

     

  10. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 18 Oct 2012 Link to this post

    OK disregard my post - it was a bad mistake on my part - the script was outside the body so of course none of the events would every fire.

  11. menaheme
    menaheme avatar
    8 posts
    Member since:
    Jul 2011

    Posted 04 Jul in reply to Alexander Valchev Link to this post

    Hello Alexander,

    I tried the code you provided but i get 'object doesn't support method or property currenItem'.

    how do i get the previous tab selected ?

    Menahem

  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Jul Link to this post

    Hi,

    from what I see, you have a typo - currentItem.

    Regards,
    Petyo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  13. menaheme
    menaheme avatar
    8 posts
    Member since:
    Jul 2011

    Posted 10 Jul in reply to Petyo Link to this post

    sorry about the typo, its just when i copied the code to the forum here.

    this is the code from the Telerik UI dojo, still does not work.

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
    </head>
    <body>
      
    <div id="tabstrip">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div id="a">Content 1</div>
        <div>Content 2</div>
    </div>

    <script>
        // event handler for select
        var onSelect = function(e) {
            // access the selected item via e.item (Element)

            // detach select event handler via unbind()
            //tabStrip.unbind("select", onSelect);

          alert(this.currentItem().text());
        };

        // attach select event handler during initialization
        var tabStrip = $("#tabstrip").kendoTabStrip({
            select: onSelect
        }).data("kendoTabStrip");
    </script>
    </body>
    </html>

  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Jul Link to this post

    Hello,

    the comments in the snippet basically explain the necessary approach - check a working version of your code.

    Regards,
    Petyo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  15. menaheme
    menaheme avatar
    8 posts
    Member since:
    Jul 2011

    Posted 13 Jul in reply to Petyo Link to this post

    Hello Petyo,

    The code you posted is actually doing something else. 

    What you did is show the currently selected tab. 

    The Admin Alexander Valchev posted code that is supposed to show the previously selected tab text, 

    His code (that does not work in the Dojo and that`s what i asked about):

    function onSelect(e) {
        this.currentItem().text(); //previous selected
        e.item.text(); //newly selected
    }
  16. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Jul Link to this post

    Hi,

    sorry - I overlooked this. The thread is dealing with the mobile TabStrip implementation, while your snippet uses the web widget. It does not have a currentItem() method. 

    Regards,
    Petyo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  17. menaheme
    menaheme avatar
    8 posts
    Member since:
    Jul 2011

    Posted 13 Jul in reply to Petyo Link to this post

    Alternatives for the web version?
  18. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Jul Link to this post

    Hi,

    There are none - you need to store the TabStrip state in a variable. You can review the TabStrip API for the full list of methods/configuration options

    Regards,
    Petyo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready