This is a migrated thread and some comments may be shown as answers.

angularjs load tabstrip on demand

1 Answer 89 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kent
Top achievements
Rank 1
Kent asked on 19 Jan 2017, 12:25 PM

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: [
'clientApp/views/admin/access.html',
'clientApp/views/admin/facility.html',

 

angularjs but all tab content load immediately

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

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 23 Jan 2017, 07:14 AM
Hi,

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.


Regards,
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.
Tags
TabStrip
Asked by
Kent
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or