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>

Initialize TabStrip Properly upon Reload

Example

See Also

Give article feedback