How to find selected tab on KendoTabStrip on page load?

Question

I am using Kendo UI MVC and i have a kendoTabStrip on acshtml page. By default I am selecting the first tab on page load. All other tabs are loaded dynamically using AJAX. Issue: I am trying to find the selected tab so i can find its children? one way to find active tab is by calling select() method without parameter, or anotherway is by checking classname 'k-state-active' however both methods doesnt work

<section class="tpt-tabstrip">
    @(Html.Kendo().TabStrip()
    .Name("MyTabStrip")    
    .Animation(false)    
    .Items(items =>
    {
        foreach (var revision in Model.MyCollection)
        {
            items.Add()
            .Text(revision.Name)
            .LoadContentFrom("MyActionMethod", "MyController", Model.ID);
        }
    })
    )    
</section>
<script src="~/Scripts/MyScript.js"></script>

Note that above in cshtml that the script tag is at the end of the page.
Below is the script code

$(function(){       
    var tabStrip = $("#MyTabStrip").getKendoTabStrip();
    if (tabStrip != null && tabStrip.tabGroup.length > 0) {
        tabStrip.select(0); // this line is getting executed for sure
    }

    // the line below returns -1 here why?????
    var index = tabStrip.select().index(); 

    // another way to find active tab is by checkikng class name 'k-state-active' however it didnt work either. 
    // jQuery couldnt find any element with class 'k-state-active'
    $('.k-state-active')
})

UPDATE1
The activate event of tabstrip would not work for me because it get fired each time i select tab. I need an event which gets fired only once. Ultimately i want to find NumericTextBox controls on selected tab and attach 'change' event handlers to those controls. like below

$(function(){
    var tabStrip = $('#MyTabStrip').data("kendoTabStrip");
    tabStrip.bind('activate', function (e) {
       $('[data-role="numerictextbox"]').each(function(){
           $(this).getKendoNumericTextBox().bind("change",function(e){
              alert('changed');
        })
       })
    });
})

here the change event handler will get attach to NumericTextBox everytime i select the tab

Ashish Shukla Ashish Shukla · Accepted Answer · 2016-04-27T06:10:25

$('.k-state-active') works fine it will return the two elements from DOM. You are trying to select element in $(document).ready that's the reason you are not getting element as tab control is not rendered yet.

Try to write your code onActivate event of kendo tab strip control. OnActivate event is triggered after a tab is being made visible and its animation complete. Before Q2 2014 this event was invoked after tab show, but before the end of the animation. This event is triggered only for tabs with associated content. See more at http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-activate

1st Tab name

<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="RoleTabs-1" style="" aria-selected="true">
<span class="k-loading k-complete k-progress"></span>
<a class="k-link">Tab Name</a>

2nd Tab Content

<div class="k-content k-state-active" id="RoleTabs-1" style="display: block; height: auto; overflow: auto; opacity: 1;" role="tabpanel" aria-expanded="true">

How to find selected tab on KendoTabStrip on page load?

1 Answers