TabStrip kendoui

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id='form' style='height:100%'>
  <div class='z-tabstrip-wrapper' style='height:50%; background-color:lightgray;'>
    <div data-role='tabstrip' data-animation='false' id='t0' data-bind='events:{activate:bb}' >
      <ul >
        <li id='1' class='k-state-active'>1sdafa</li>
        <li id='2'>2asdf</li>
        <li id='3'>3ffff</li>
      </ul>
      <div style='height: calc(100% - 5em);'>
        1
        <br> 2
        <br> 3
        <br> 4
        <br> 5
        <br> 6
        <br> 6
        <br> 7
        <br> 8
        <br> 9
        <br> 0
        <br> -
      </div>
      <div style='height: calc(100% - 5em);'>
        2
      </div>
      <div style='height: calc(100% - 5em);'>
        3
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  height: calc(100% - 2px);
  margin: 0px;
}

.z-tabstrip-wrapper .k-tabstrip-wrapper
{
	height: 100%;
}

.z-tabstrip-wrapper .k-tabstrip-wrapper .k-tabstrip
{
	height: 100%;
}

.zz-tabstrip-wrapper .k-tabstrip-wrapper .k-tabstrip .k-content
{
	height: calc(100% - 5em);
}

JavaScript

var model = kendo.observable({
  t: function(val) {
    $("#t0").data("kendoTabStrip").select(val);
  },
	bb: function(e){
		console.log($(e.item).index());
	}
});

//model.get("t")(2);

//setTimeout(function(e) {
//  model.get("t")(0);
//},3000)

$(document).ready(function() {

  kendo.bind($("#form"), model);
/*
  var t = $("#t0");
  t.parent().css("height", "450px");
  t.children(".k-content").height(
    t.innerHeight() - t.children(".k-tabstrip-items").outerHeight() - 36.24
  );
*/
});
/*
$(window).resize(function() {
  var t = $("#t0");
  t.parent().css("height", "450px");
  t.children(".k-content").height(t.innerHeight() - t.children(".k-tabstrip-items").outerHeight() - 36.24);
});
*/