This is a migrated thread and some comments may be shown as answers.
Determining which tab was pressed in tabstrip handler
16 Answers 563 Views
This is a migrated thread and some comments may be shown as answers.
Anker Berg-Sonne
Top achievements
Rank 1
Anker Berg-Sonne asked on 09 Apr 2012, 08:53 PM
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

16 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 10 Apr 2012, 07:34 AM
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!
0
Don
Top achievements
Rank 2
answered on 10 Jul 2012, 05:42 PM
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
0
Alexander Valchev
Telerik team
answered on 13 Jul 2012, 01:47 PM
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!
0
Don
Top achievements
Rank 2
answered on 13 Jul 2012, 04:31 PM
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);   
                 }
            }
0
Don
Top achievements
Rank 2
answered on 17 Jul 2012, 09:51 PM
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
0
Shawn
Top achievements
Rank 2
answered on 18 Oct 2012, 06:43 PM
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.
0
Don
Top achievements
Rank 2
answered on 18 Oct 2012, 07:39 PM
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);
            }

 

0
Shawn
Top achievements
Rank 2
answered on 18 Oct 2012, 09:59 PM
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.

0
menaheme
Top achievements
Rank 1
answered on 04 Jul 2016, 10:57 AM

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

0
Petyo
Telerik team
answered on 07 Jul 2016, 06:57 AM
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.
 
0
menaheme
Top achievements
Rank 1
answered on 10 Jul 2016, 07:40 AM

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>

0
Petyo
Telerik team
answered on 13 Jul 2016, 08:34 AM
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.
 
0
menaheme
Top achievements
Rank 1
answered on 13 Jul 2016, 09:02 AM

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
}
0
Petyo
Telerik team
answered on 13 Jul 2016, 11:44 AM
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.
 
0
menaheme
Top achievements
Rank 1
answered on 13 Jul 2016, 12:05 PM
Alternatives for the web version?
0
Petyo
Telerik team
answered on 18 Jul 2016, 06:47 AM
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.
 
Asked by
Anker Berg-Sonne
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Don
Top achievements
Rank 2
Alexander Valchev
Telerik team
Shawn
Top achievements
Rank 2
menaheme
Top achievements
Rank 1
Share this question
or