Selecting a tab in Kendo UI

[Mono]

Hello,

I have created a tab control. I'm trying to figure out how to select a tab from JavaScript. Currently, I'm trying the following and its not working.

<div id="myTabs">

  <ul>

    <li class="k-state-active">Tab 1</li>

    <li>Tab 2</li>

    <li>Tab 3</li>

  </ul>

 

  <div id="tab1">tab 1 content</div>

  <div id="tab2">tab 2 content</div>

  <div id="tab3"><input type="button" onclick="selectMyTab();" value="button" /></div>

</div>

 

 

<script type="text/javascript">

    $().ready(function () {

        $("#myTabs").kendoTabStrip({

            animation: { open: { effects: ""} }

        });

   });

 

  function selectMyTab() {

    $("#myTabs").kendoTabStrip().select("#tab1");

  }

</script>

What am I doing wrong?

[Damon]

Hi Mono.

Here is what I did and it seems to work just fine:

/*    TABS SECTION  */

    var mainTabs =$('#tabs').kendoTabStrip().data("kendoTabStrip");

    var themeTabs = $('#theme-tabs').kendoTabStrip().data("kendoTabStrip");

 

// create keys Add new keys here when adding new horizontal or vertical

        var mainTabActive = 'Theme';  // Horizontal Tabs

        var themeTabActive = 'tt-1'; // Vertical tab group on each mainTab

// Check if "key" exists in the storage

        var mainTabActive = $.jStorage.get("mainTab");

        var themeTabActive = $.jStorage.get("themeTab");

  

// set the tab

                mainTabs.select('#' + mainTabActive);

               themeTabs.select('#' + themeTabActive );

The only thing that I am struggling with is that I get draw issues if I attempt to set more than one tabstrip.

[Jayesh]

Hi Damon,

I was facing the similar issue and it get solved by making some changes.

When you add two kendo Tabs, make sure you change the javascript code to act on two different function on event.

Please find the snippet.

             <script>
                  $(document).ready(function() {
                      $("#tabstrip1").kendoTabStrip({
                          animation:    {
                              open: {
                                  effects: "fadeIn"
                              }
                          }
                      
                      });
                  });
                  
                   $(document).ready(function() {
                      $("#tabstrip2").kendoTabStrip({
                          animation:    {
                              open: {
                                  effects: "fadeIn"
                              }
                          }
                      
                      });
                  });
              </script>

It worked for me.

[Damon]

Ho Jayesh,
Thanks I will try that at some point.  Everything is working fine for me now.  I am working within the WordPress framework and it gets a little tricky sometimes working with jQuery plugins, but I am quickly learning the quirks.
I still think this is an awesome set of widgets.

Cheers!