This is a migrated thread and some comments may be shown as answers.

Animation not disabled, weird effect

2 Answers 186 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

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>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.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

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.