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.

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.

Example

    <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

Other articles on the Kendo UI TabStrip:

• 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.