tabstrip loadondemand

[Bob]

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>

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

 

[Dimiter Madjarov]

Hello Bob,


When the keepItemContent option is set to true, all tab contents are rendered initially and persisted in the DOM. This is the reason for the observed behavior.

https://www.telerik.com/kendo-angular-ui/components/layout/api/PanelBarComponent/#toc-keepitemcontent

Regards,
Dimiter Madjarov
Progress Telerik

[Bob]

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.

[Dimiter Madjarov]

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