Content Operations
The TabStrip provides options for loading its content with AJAX and enabling scrolling for its tab content.
Loading Content with AJAX
The TabStrip provides built-in support for asynchronously loading content from remote URLs. These URLs return HTML content that can be loaded in the content area of the TabStrip items. In order for the AJAX loading to work, the content div elements have to be empty. For the complete example, refer to the demo on loading TabStrip content with AJAX.
<div id="tabstrip">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div></div>
<div></div>
</div>
<script>
$(document).ready(function(){
$("#tabstrip").kendoTabStrip({
contentUrls: [null, "html-content-snippet.html"]
});
});
</script>
Enabling Content Scrolling
By default, the content containers of the TabStrip are scrollable. As a result, if the widget has a fixed height and holds large content that cannot fit, its displays scrollbars on its sides. If required, you can disable the content scrolling of the TabStrip which can help in scenarios where the TabStrip hosts a widget (such as the Menu) that needs to overflow the TabStrip. For a complete example, refer to the article on disabling the content scrolling of the TabStrip.
Depending on the browser, the scroll position of the content may be reset upon changing the active tab. To persist the scroll position:
For a complete example, refer to the article on saving the scroll position of the TabStrip content.