Avoid a tabstrip to be active, or make one active

3 posts, 1 answers
  1. Chris @ Willows Consulting Ltd.
    Chris @ Willows Consulting Ltd. avatar
    15 posts
    Member since:
    Sep 2013

    Posted 29 Oct 2013 Link to this post

    Helly Guys,


    I have two tabstrip, but I want the first one to always appear as active. Here is the excerpt of the code below (that doesn't work).

        <!-- FOOTER -->
        <div data-role="footer" data-align="left">
            <div data-role="tabstrip" data-align="left">
                <a href="#results" data-icon="globe" data-transition="slide:top" id="resultstab"><div id="results_count_display" style="color:white" class="km-text">Loading..</div></a>
                <a href="#filter" data-icon="settings" data-transition="slide:top" id="settingstab"><div class="km-text" style="color:white">Filter</div></a>
            </div>
        </div
        <!-- END OF: FOOTER -->
    <script>
    $('#settingstab').bind('click', function () { $('#settingstab').removeClass('km-state-active');$('#resultstab').addClass('km-state-active'); });   
    </script>
    </div>
    I want that when "settingstab" is clicked on: the "resultstab" flips back to active.


    Thanks.
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 29 Oct 2013 Link to this post

    Hi Sean,

    Such functionality is not supported out of the box. However you can use the TabStrip's select event and change the classes of the items inside. Please check the following example showing a possible implementation:

    http://jsbin.com/ATADOWu/3/edit
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Chris @ Willows Consulting Ltd.
    Chris @ Willows Consulting Ltd. avatar
    15 posts
    Member since:
    Sep 2013

    Posted 30 Oct 2013 Link to this post

    Thanks a lot Kiril, it's working fine now :).
Back to Top