New to Kendo UI for jQuery? Download free 30-day trial

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 on select 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.


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">
             <li ng-repeat="tab in tabs" class=""> {{tab.title}} </li>
           <div ng-repeat="tab in tabs"> {{tab.content}} </div>
         <div kendo-tab-strip k-ng-delay="tabs2">
             <li ng-repeat="tab in tabs2" class=""> {{tab.title}} </li>
           <div ng-repeat="tab in tabs2"> {{tab.content}} </div>
       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);

See Also

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article