In Telerik TabStrip (MVC), how to get the selected tab index?

Question

My page looks like this, depending on the index of the selected tab, the Save button needs to behave differently.

This is the jQuery code.

$("#btnSave").click(function () {
    var selectedTabIndex = $('#TabStrip').select().index()

    if (selectedTabIndex == 1) {
        InflowsSave();
    }

    if (selectedTabIndex == 2) {
        OutflowsSave();
    }

});

I typed $('#TabStrip').select().index() within the Inspect Elements console. It doesn't matter which tab is selected, it always returns 2.

>>> $("#TabStrip").select().index()

2

$("#TabStrip").select()

<ul class="t-reset t-tabstrip-items">
    <div id="TabStrip-1" class="t-content">
    <div id="TabStrip-2" class="t-content t-state-active" style="display:block">
    <div id="TabStrip-3" class="t-content">

are you working with Telerik Extensions for ASP.NET MVC or Kendo UI Wrappers for ASP.NET MVC ? — kashyapa

kashyapa kashyapa · Accepted Answer · 2012-11-01T06:07:51

if you are using the Telerik Extensions for ASP.NET MVC - have a look at the following documentation on client side event handling of TabStrip

TabStrip Client API & Events

the way to select any Telerik Extension control from JavaScript is as follows:

View:

<%= Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(items =>{/*items definition */})
%>

JavaScript:

<script type="text/javascript">
        function getTabStrip(){

            var tabStrip = $("#TabStrip").data("tTabStrip");

            return tabStrip;

        }
</script>

In your scenario in order to know which tab is selected, i would suggest you to listening to tabstrip select event and have a flag set as to which tabstrip is selected. Here is the code to handle client side events:

View:

<% 
  Html.Telerik().TabStrip()
  .Name("TabStrip")
  .Items(items =>{/*items definition */})
  .ClientEvents(events =>
    {
        events.OnSelect("Select");
        events.OnError("Error");
        events.OnContentLoad("ContentLoad");
        events.OnLoad(() =>
            {%>
                function(e) {
                /*TODO: actions when the control is loaded.*/
                // "this" is the tabstrip.
                }
            <%});
    })
  .Render(); %>

Javascript:

<script type="text/javascript">              
      function Select(e) {
              // "this" in this event handler will be the component.
              // the "e" is an object passed by the jQuery event trigger. 
      }
      function Error(e) {
        //code handling the error
      }
      function ContentLoad(e) {
        //code handling the content load
      }
</script>

As you can see you can set a flag as to which tab is selected in the Select() method and in your save button click check the flag and act accordingly

If you go through the documentation link i provided at top - it will tell you all the client side events and API exposed by the control

Hope this answers your question

In Telerik TabStrip (MVC), how to get the selected tab index?

3 Answers