We can implement the tab strip in the Kendo UI using the widget called kendo tabstrip
Step 1
Create a HTML page in my case I named it as Tabstrip.html and write the following code in it.
  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  6. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  7. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  8. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  9. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  10. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  11. <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
  12. <title></title>
  13. </head>
  14. <body>
  15. <div id="example" style="width:400px">
  16. <h4>Select a tab</h4>
  17. <div data-role="tabstrip"
  19. visible: isVisible">
  20. <ul>
  21. <li>
  22. Tab1
  23. </li>
  24. <li>
  25. Tab2
  26. </li>
  27. <li>
  28. Tab3
  29. </li>
  30. <li>
  31. Tab4
  32. </li>
  33. </ul>
  34. <div>
  35. <span> Content in Tab1</span>
  36. </div>
  37. <div>
  38. <span>Content in tab2</span>
  39. </div>
  40. <div>
  41. <span>Content in tab3</span>
  42. </div>
  43. <div>
  44. <span>Content in tab4</span>
  45. </div>
  46. </div>
  47. </div>
The data-role property is used to set the widget(tab strip ).
Step 2
The JavaScript in MVVM Model
  1. var viewModel = kendo.observable({
  2. isVisible: true,
  4. });
  5. kendo.bind($("#example"), viewModel);
From the above script we are going to enable the Kendo tabstrip
Result in Browser

Figure 1: Tab1

Figure 2: Tab3