CODEWITHSUNDEEP
javascriptjqueryasp.net-mvctelerik
Kyle
Kyle

Reputation: 5557

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

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

menu

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

Upvotes: 1

Views: 8823

Answers (3)

BlackBeard_Ale
BlackBeard_Ale

Reputation: 183

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

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

Upvotes: 0

Kyle
Kyle

Reputation: 5557

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

Upvotes: 3

kashyapa
kashyapa

Reputation: 1626

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

Upvotes: 4

Related Questions