javascript - In Telerik TabStrip (MVC), how to get the selected tab index? - Stack Overflow

admin管理员组

文章数量:1313729

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">

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">

• javascript
• jquery
• asp-mvc
• telerik

Share Improve this question Follow edited Aug 26, 2019 at 11:15 Glorfindel 22.7k1313 gold badges8989 silver badges118118 bronze badges asked Nov 1, 2012 at 4:33 KyleKyle 5,55777 gold badges3737 silver badges4848 bronze badges 2

• are you working with Telerik Extensions for ASP.NET MVC or Kendo UI Wrappers for ASP.NET MVC ? – kashyapa Commented Nov 1, 2012 at 5:55
• I'm using ASP.NET MVC. Thanks. – Kyle Commented Nov 1, 2012 at 5:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 ponent.
              // 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

The answer wasn't obvious. Active tabs have the .t-item.t-state-active css class. So we'd need to find it using jQuery. Hope this helps someone in the future.

var selectedTabIndex = $("#TabStrip > ul").find(".t-item.t-state-active").index();

I did this way, and for me it is working:

var selectedTabId = $("#TabStrip > ul").find(".t-item.t-state-active")[0].id;

本文标签： javascriptIn Telerik TabStrip (MVC)how to get the selected tab indexStack Overflow