Problem with append of tabs

3 posts, 0 answers
  1. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 13 Oct 2014 Link to this post

    After appending tabs, the behavior when switching tabs is not correct (using Chrome at the moment). Please run the code sample below.

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.rtl.min.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css">
      <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css">
    </head>
    <body ng-app='app'>
      <div ng-controller='Ctrl'>
        <div>Add two tabs, click on the 2nd, then the 3rd. Then click on tabs 1 or 2.
          <a href="" ng-click="addTab()">{{label}}</a>
        </div>
        <div id="tabstrip" kendo-tab-strip>
          <ul>
            <li class='k-state-active'>Tab 1</li>
          </ul>
          <div>This is content for tab 1</div>
        </div>
      </div>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script src="//code.angularjs.org/1.3.0/angular.min.js"></script>
    <script src="//cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
    <script>
    (function(){
      var app = angular.module('app', ['kendo.directives']);
      app.controller('Ctrl', function($scope) {
        var i = 2;
        $scope.label = "Add Tab";
        $scope.addTab = function() {
          $('#tabstrip').kendoTabStrip().data('kendoTabStrip').append({
            text: 'Tab ' + i,
            content: 'This is context for tab ' + i
          });
          i++;
        };
      });
    })();
    </script>
    </body>
    </html>
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Oct 2014 Link to this post

    Hello Raymond,

    You are instantiating the widget multiple times - please check the following help topic.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 14 Oct 2014 in reply to Petyo Link to this post

    OK. That makes sense. I copied it from the API docs for append() not realizing that the .kendoTabStrip() was creating the instance. Thanks for the quick reply.
Back to Top