Animation not disabled, weird effect

3 posts, 0 answers
  1. Tayger
    Tayger avatar
    117 posts
    Member since:
    Jan 2015

    Posted 22 Apr Link to this post

    Hello 

    By disabling animation on kendoTabStrip it is still active if you switch tabs programmatically. I have created a demo with two buttons, which switch between tabs programmatically. If you click directly on Tab1 or Tab2 there is no animation and the tabs are displayed right away.
    If you use the switch buttons you see a slide up/down animation effect. Example based on your document code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Kendo UI Snippet</title>
     
     
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
       
    <div id="tabstrip">
        <ul>
            <li id="tab1">Tab 1</li>
            <li id="tab2">Tab 2</li>
        </ul>
        <div>Content 1</div>
        <div>Content 2</div>
    </div>
       
      <button id= "switch1" type="button">Switch to Tab1</button>
      <button id= "switch2" type="button">Switch to Tab2</button>
     
    <script>
        $("#tabstrip").kendoTabStrip({
           animation: false
        });
       
        $(document).on("click", "#switch1", function(e) {
         var tabToActivate = $("#tab1");
            $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);
        });
       
        $(document).on("click", "#switch2", function(e) {
         var tabToActivate = $("#tab2");
            $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);  
        });    
       
    </script>
    </body>
    </html>

     

    Shouldn't the animation also be disabled on using activateTab() function?

    Weird behaviour: On disabled animation (animation: false) there is a case where tabstrip content wont be displayed anymore. You can use the demo above to reproduce this:

    1. Start the demo
    2. Click on tab "Tab 1"
    3. Click on button "Switch to Tab2"
    4. Click again on "Tab 1" -> content is not displayed (grey)

    It also works the other way around so Tab2 is not showing content. This weird effect is only reproducible on "animation: false". So I guess its a problem with the animation itself.

    Regards

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1265 posts

    Posted 25 Apr Link to this post

    Hello,

    In both cases (improper animation disable and tab content not being loaded) the reason for the unexpected behavior is that you reinitialize the TabStrip in the click handlers instead of getting a proper reference:

    This reinitializes the TabStrip:
    $("#tabstrip").kendoTabStrip().data("kendoTabStrip").activateTab(tabToActivate);

    This gets a reference without reinitializing the widget:
    $("#tabstrip").data("kendoTabStrip").activateTab(tabToActivate);

    Modified dojo.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    117 posts
    Member since:
    Jan 2015

    Posted 26 Apr in reply to Ivan Danchev Link to this post

    Thank you Ivan, that was my mistake! Now it runs flawless as it should!
Back to Top