kendo tabstrip activate tab mvvm
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='container'>
<button data-bind='click:selectTab1'>Tab 1</button>
<button data-bind='click:selectTab2'>Tab 2</button> <span data-bind='text:selectedTabIndex'></span>
<div data-role='tabstrip' id="tabstrip">
<ul>
<li>Current Orders</li>
<li>Future Orders</li>
</ul>
<div>tab 1</div>
<div>tab 2</div>
</div>
</div>
JavaScript
var viewModel = new kendo.observable({
selectedTabIndex: 0,
selectTab1: function (e) {
e.preventDefault();
$("#tabstrip").data("kendoTabStrip").select(0);
},
selectTab2: function (e) {
e.preventDefault();
$("#tabstrip").data("kendoTabStrip").select(1);
}
});
kendo.bind($('#container'), viewModel);