Determining which tab was pressed in tabstrip handler

[Anker Berg-Sonne]

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

[Petyo]

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

[Don]

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

[Alexander Valchev]

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

[Don]

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);   
                 }
            }

[Don]

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

[Shawn]

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.

[Don]

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);
            }

 

[Shawn]

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.

[menaheme]

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

[Petyo]

Hi,

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

Regards,
Petyo
Telerik by Progress

 

 

[menaheme]

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>

[Petyo]

Hello,

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

Regards,
Petyo
Telerik by Progress

 

 

[menaheme]

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
}

[Petyo]

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

 

 

[menaheme]

Alternatives for the web version?

[Petyo]

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