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

tabstrip loadondemand

3 Answers 762 Views

TabStrip

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

Bob asked on 29 Jul 2019, 06:25 PM

I have a tab strip with two tabs, each containing an angular component inside of which is a grid.

Currently both components are initialised and the data for bothy grids is fetched from the server, hardly desirable. I have *loadOnDemand set on both tabs but this does not seem to work, here is some code to explain:

<kendo-tabstrip [tabPosition]="'left'"

[keepTabContent]="true">

<kendo-tabstrip-tab title="{{ 'NcDocumentReviews' | localize }}" [selected]="true">

<ng-template kendoTabContent *loadOnDemand>

<app-nc-document-review

#documentReviewComponent

[id]="id"

[parent]="ncEntity"

(notifyModify)="onLoadModifyButtonSelected($event)"

(viewDocument)="showDocument($event)"

(viewHistory)="showHistory($event)"></app-nc-document-review>

</ng-template>

</kendo-tabstrip-tab>

<kendo-tabstrip-tab title="{{ 'NcDocumentsLoad' | localize }}">

<ng-template kendoTabContent *loadOnDemand>

..code removed for brevity

How do I configure the tab strip so the contents of each tab is fired only when the tab is selected?

3 Answers, 1 is accepted

answered on 30 Jul 2019, 09:35 AM

Hi Dimiter,

Thanks for getting back.

If this is the desired behaviour I would like to make a change request.
The *loadOnDemand should do exactly what it says, load the contents of a tab when it is selected.
The *keepItemContent should not override *loadOnDemand it should merely do what it says, keep tab item content once loaded.
The two decorators should play nicely with each other, not argue about who is most important.

answered on 30 Jul 2019, 02:09 PM

Hello Bob,

I missed the fact that the approach demonstrated in our "Load Tabs on Demand" How-To example is currently being used. Since that is the case, indeed the behavior is not expected. However I am unable to reproduce it in the example itself

https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/how-to/load-tabs-on-demand/

The tab contents are loaded when the tabs are selected for a first time and persisted afterwards. If the issue is still persisting on your end, please modify the example in Stackblitz in order to demonstrate the problem, so we could assist further in resolving it.

Regards,
Dimiter Madjarov
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.