angularjs load tabstrip on demand

2 posts, 0 answers
  1. Kent
    Kent avatar
    6 posts
    Member since:
    Aug 2012

    Posted 19 Jan 2017 Link to this post

    I want to load tabstrip when the tab is clicked only.  It would work if I put contentUrls in "document ready function".  But when I put url in <div class k-content-url=...> with angularjs, it will load all the tab content together.

    How can I use angularjs inside tabstrip but load the tab content on demand only? Thanks.


    No angularjs, but each tab load on demand:

    $(document).ready(function () {
    var ts = $("#tabstrip").kendoTabStrip({
    animation: { open: { effects: "fadeIn" } },
    contentUrls: [


    angularjs but all tab content load immediately

    <div class="col-md-9 addpadding" kendo-tab-strip k-content-urls="[ null, null, null]">
    <li class="k-state-active">Basic Info</li>
    <li>another tab2</li>
    <li>another tab3</li>
    <div style="padding: 1em" data-ng-class="{inactivePink: staff.Inactive}">
    <div data-ng-include="'/clientApp/staff/partial/basicinfo.html'"></div>
    <div style="padding: 1em">
    <div data-ng-include="'/clientApp/staff/partial/anothertab2.html'"></div>

  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 23 Jan 2017 Link to this post


    I am afraid that such functionality is not supported with the Kendo UI Tabstrip for AngularJS. It is however enabled by default in our Angular 2 offering.

    Kiril Nikolov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top