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.
- <!DOCTYPE html>
- <html
- xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
- <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
- <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
- <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
- <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
- <title></title>
- </head>
- <body>
- <div id="example" style="width:400px">
- <h4>Select a tab</h4>
- <div data-role="tabstrip"
-
- visible: isVisible">
- <ul>
- <li>
- Tab1
- </li>
- <li>
- Tab2
- </li>
- <li>
- Tab3
- </li>
- <li>
- Tab4
- </li>
- </ul>
- <div>
- <span> Content in Tab1</span>
- </div>
- <div>
- <span>Content in tab2</span>
- </div>
- <div>
- <span>Content in tab3</span>
- </div>
- <div>
- <span>Content in tab4</span>
- </div>
- </div>
- </div>
The data-role property is used to set the widget(tab strip ).
Step 2
The JavaScript in MVVM Model
- var viewModel = kendo.observable({
- isVisible: true,
-
- });
- 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