Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Animation not disabled, weird effect

2 Answers 163 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 22 Apr 2017, 01:40 PM

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 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 25 Apr 2017, 02:39 PM
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.
0
Tayger
Top achievements
Rank 1
Iron
answered on 26 Apr 2017, 11:55 AM
Thank you Ivan, that was my mistake! Now it runs flawless as it should!
Tags
TabStrip
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Ivan Danchev
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or