Upgrade to 2012 Q1 update breaks tabstrip

6 posts, 1 answers
  1. matt
    matt avatar
    3 posts
    Member since:
    Jan 2012

    Posted 08 May 2012 Link to this post

    What i was wanting to happen is for my aspx page to load a number of user controls and then for the tabstrip control turn each loaded user control into a tabstrip item. I have written some code that will take the contents of a div and set it as the title then another div as the content. The idea was to have more control over the tab titles and for the tabs to be created dynamically. The amount of user controls and the content isnt known till the page is loaded

    Basically the exact same code as below works with 2011 Q3 but not with the new update.

    Javascript

    $(document).ready(function () {
    // var ParentID;
    $("#tabstrip").kendoTabStrip({
    });
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    //for each DIV within tab content, move it to a new tab within the tad strip
    $('#tabcontent').children().each(function (index) {
    //Get HTML from DIV
    var title = $(this).find('.tab_title').html();
    $(this).find('.tab_title').css('display', 'none');
    var innerHTML = $(this).html();
    //Append to the TABStrip
    tabstrip.append(
    [{
    text: title,
    content: innerHTML
    }]
    );
    //Remove original DIV
    $(this).remove();
    });
    $('#tabstrip .k-tabstrip-items').children().each(function (index) {
    var th = $.trim($(this).text());
    $(this).html(th);
    });
    });


    aspx page

    <div id="tabstrip">
         </div>
         <div id="tabcontent">
             <asp:PlaceHolder ID="PHContent" runat="server"></asp:PlaceHolder>
         </div>

    N.B. Placeholder is where the user controls is loaded into


    User Control

    <div class="editDefaultInfo" title="Tab Title">
    <div class="tab_title">
    <span class="glyph listicon"></span>
    <p>Tab Title</p>
    </div>
    <h1>Tab Title</h1>
    <div class="form_content">
    Tab Content
    </div><!--form_content-->
    </div><!--Defaultinfo-->



    Has something changed with the tabstrip control that would mean it no longer works?

  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 May 2012 Link to this post

    Hello Matt,

    Maybe the problem is that you initialize Kendo TabStrip twice. Can you check if removing on of them helps? From:
    $("#tabstrip").kendoTabStrip({
    });
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

    to
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    only.

    Kind regards,
    Kamen Bundev
    the Telerik team
    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. matt
    matt avatar
    3 posts
    Member since:
    Jan 2012

    Posted 09 May 2012 Link to this post

    That was it, rookie mistake!!!!

    Thanks.
  5. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 17 May 2012 Link to this post

    I am getting an odd effect when I switched to the 515 build,

    My TabStrip works fine in Chrome and Firefox (latest versions) but in IE9 I am seeing an effect that looks more like a PanelBar (i.e. heading are one below each other, rather than a horizontal layout of tabs).

    PS: I just switched back to the old version, and it is happening there also, so ignore this part about the version, it is something else I must have just done. But it is odd that it only shows up in IE9, It might have to do with the fact that my TabStrip is inside of a Splitter.

  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 18 May 2012 Link to this post

    Hi Yechezkal,

    Check if the browser is not falling in Quirksmode (F12 -> Document Mode -> Quirks Mode), which is not supported by Kendo UI.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 18 May 2012 Link to this post

    You are very sharp, because I was still trying to dig up more information, and I did not think I had provided enough.

    Indeed, it is starting in quirks mode (even though I believe my header is HTML5 compliant):

    <!DOCTYPE html>
    <html lang="en">
    <head>

    UPDATE: I found my issue (thanks the w3c html vaidator). I added a todo before the doctype, which I now fixed
    <!DOCTYPE html>
    <!--todo make map and panes grow to 100% of free space-->
    <html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>EGPL Catalog Search</title>
        <script src="Kendo/jquery-1.7.1.js" type="text/javascript"></script>
        <script src="Kendo/kendo.all.js" type="text/javascript"></script>

Back to Top
Kendo UI is VS 2017 Ready