This is a migrated thread and some comments may be shown as answers.

Problem with append of tabs

2 Answers 167 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

Ray asked on 14 Oct 2014, 02:18 AM

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>

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with append of tabs

2 Answers, 1 is accepted