Tab does not select when page local dataUrlField data is specified.

4 posts, 1 answers
  1. Zach
    Zach avatar
    4 posts
    Member since:
    Nov 2012

    Posted 20 Sep 2013 Link to this post

    The example below illustrates a case in which tabs do not select when the dataUrlField is specified as a page local href  such as '#content1'.
    It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.

    <!DOCTYPE html>
    <head>
     
        <link href="kendo.common.min.css" rel="stylesheet" />
        <link href="kendo.default.min.css" rel="stylesheet" />
     
        <script src="jquery.min.js"></script>
        <script src="kendo.all.min.js"></script>
        <script>
            $(function () {
     
                var data = [{ Name: 'Tab 1', Url: '#content1' }, { Name: 'Tab 2', Url: '#content2' }];
     
                $("#tabstrip").kendoTabStrip({
                    dataTextField: "Name",
                    dataUrlField: "Url",
                    dataSource: data,
                    select: function (el) {
     
                        //would be nice to have a reference to the data source data item here rather than relying on the item index.
     
                        var itemIndex = $(el.item).index();
                        $('.tabContent').hide();
                        $('#content' + itemIndex).show();
                    }
                });
     
                getSelectedTabIndex = function () {
                    return $("#tabstrip").data("kendoTabStrip").select().index();
                }
     
                $('#showSelectedTabIndex').click(function () {
                    //always returns -1
                    alert(getSelectedTabIndex());
                });
     
            });
        </script>
    </head>
    <body>
     
        1.) Click a tab <br />
        2.) Click the Show Selected Tab Index button.<br />
        <br />
        The tab is not visually selected and the value returned for the selected index is -1.
        <br /><br />
     
          
         
        <button id="showSelectedTabIndex">Show Selected Tab Index</button>
         
        <div id="tabstrip"></div>
        <div id="content0" class="tabContent" style="display:none;">Content 1</div>
        <div id="content1" class="tabContent" style="display:none;">Content 2</div>
     
         
     
    </body>
    </html>
  2. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 24 Sep 2013 Link to this post

    Hello,

    The selection is not updated when the url option is used for the item since it is expected that the page will be navigated. If the selection should also be updated in your scenario then I can suggest to use the activateTab method in the select event:

    select: function (e) {
        this.activateTab(e.item);
    }
    Regards,
    Daniel
    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. Zach
    Zach avatar
    4 posts
    Member since:
    Nov 2012

    Posted 03 Oct 2013 Link to this post

    Thanks Daniel.

    Hopefully the activateTab method can be listed in the documentation at some point. Also, this still seems like a bug. The browser is not going to navigate if the href start with #, so the expected behavior would be for the tab to activate without the need for a call to activateTab.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 07 Oct 2013 Link to this post

    Hello again,

    Thank you for noticing that the activateTab method is missing from the documentation. I have included it and it should now be available. 
    Regarding the scenario with the local URLs - currently we do not plan to add support for this scenario and at least so far, you are the first one to request it. If you believe that this should be handled internally by the widget then I can suggest to open a new item in our user voice forum so we can track its interest.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready