CODEWITHSUNDEEP
angularjstabskendo-ui
Smarajit
Smarajit

Reputation: 173

Angular Kendo UI Tabstrip active state for dynamic tabs

I am trying to implement dynamic tabs using Kendo UI Tabstrip in Angular JS. How to indicate the active state? For example I want the second tab to be active by default.

Markup with directives

<div data-kendo-tab-strip="" data-k-animation="false" k-data-source="panes" k-data-text-field="'title'" k-data-content-field="'content'" ></div>




//Tabs controller
ngUI.controller('nguiTabsController', function($scope) {
     $scope.panes = {

        data : [ {title:"First", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor sed lacus interdum rutrum. Mauris mauris dui, rhoncus ut magna vitae, faucibus elementum lectus. "},
                 {title:"Second", content:"Sed auctor, turpis at scelerisque dapibus, dolor quam laoreet nibh, in pulvinar augue est a est. Nulla eu nulla nunc. Donec eu augue placerat, tincidunt diam vel, fringilla velit. Ut convallis faucibus neque. Nullam pellentesque, nisi quis facilisis tincidunt."},
                 {title:"Third", content:"Maecenas posuere tellus vel elit cursus porttitor. Proin auctor lorem risus, sit amet blandit ligula ultricies sit amet. Pellentesque eget velit ut libero faucibus lobortis."},
                 {title:"Fourth", content:"Suspendisse sodales consequat aliquet. Mauris ultricies nisl a metus convallis, at iaculis elit scelerisque. Nullam dignissim convallis lectus eu malesuada. Etiam libero mi, suscipit at auctor id, porta eu justo. Nullam a ipsum dictum, gravida erat vitae, sollicitudin justo."},
                 {title:"Fifth", content:"Phasellus suscipit ipsum molestie augue interdum sodales. Sed sit amet eros in odio viverra aliquam vitae nec odio. Nulla condimentum eleifend tortor, non malesuada purus placerat non. Mauris porttitor odio tortor."}]


};

});

Upvotes: 1

Views: 3865

Answers (1)

jbasiago
jbasiago

Reputation: 86

Change the div to define the widget reference; 

<div data-kendo-tab-strip="tabStrip"...

In the controller, create the tabStrip scope variable and place a watch on it. When it is set, select the desired tab by number.

ngUI.controller('nguiTabsController', function($scope) {
    $scope.tabStrip = null;
    $scope.$watch('tabStrip', function() {
      $scope.tabStrip.select(0);
    });

    $scope.panes...
}

Upvotes: 6

Related Questions