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:

  1. Use the select event to save the current scroll position.
  2. Use the activate event to restore it.

For a complete example, refer to the article on saving the scroll position of the TabStrip content.

See Also

In this article
Not finding the help you need? Improve this article