Initialize TabStrip Properly upon Reload
Sometimes the styles of a Kendo UI TabStrip do not persist when it is reloaded. This behavior might be caused by a timing issue because of applying k-ng-delay
and the inability of the widget to initialize accordingly.
To ensure that the Kendo UI TabStrip is properly initialized, choose one of the following solutions:
- Use the
select
method of the TabStrip to have the widget pre-selected. For more information on how to do it, refer to the article onselect
and the introductory article on the TabStrip. - Load your styles correctly with
k-ng-delay
by using the$timeout
service. For more information on how to do this, refer to the example below. - Configure the TabStrip to recreate itself automatically when part of the settings are changed.
Important
It is not recommended to create Kendo UI widgets by using
ng-repeat
. Use the Kendo UI DataSource instead. For more information, refer to the article on troubleshooting as well as on the DataSource abstraction in AngularJS.
<div ng-app="foo">
<div ng-controller="mine">
<div kendo-tab-strip k-ng-delay="tabs">
<ul>
<li ng-repeat="tab in tabs" class=""> {{tab.title}} </li>
</ul>
<div ng-repeat="tab in tabs"> {{tab.content}} </div>
</div>
<div kendo-tab-strip k-ng-delay="tabs2">
<ul>
<li ng-repeat="tab in tabs2" class=""> {{tab.title}} </li>
</ul>
<div ng-repeat="tab in tabs2"> {{tab.content}} </div>
</div>
</div>
</div>
<script>
angular.module("foo", ['kendo.directives' ])
.controller("mine", function($timeout, $scope) {
$scope.tabs2 = [
{ title: "tabs2tab1", content: "tabs2tab1" },
{ title: "tabs2tab1", content: "tabs2tab1" },
];
$timeout(function() {
$scope.tabs = [
{ title: "tab1", content: "tab1" },
{ title: "tab2", content: "tab2" },
]
}, 68);
});
</script>
See Also
- TabStrip JavaScript API Reference
- How to Add Close Button to Tabs
- How to Expand to 100% Height and Auto-Resize
- How to Save Content Scroll Position
- How to Scroll TabStrip with Keyboard
For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.