[Solved] tabstrip - Ajax loaded tab behavior

[Vinod]

Hello,

I am trying to implement a dynamic tabstrip. Below is the code snippets after which I will try to explain the problem I am facing.

HTML:

<div class="text-module">
    <div k-animation="false" class="basic"
         k-options="vm.tabOptions"
         k-data-source="vm.tabsToDisplay"
         k-data-content-url-field="'contentUrl'"
         k-data-text-field="'title'"
         ng-model="vm.tabToSelect">
    </div>
</div>

Data source collection:

vm.tabsToDisplay = new kendo.data.DataSource();
vm.tabItemsSource = [
    {
        id: 1,
        title: 'Title1',
        contentUrl: '/App/Modules/MyModule/Views/a.html',
        Type: 'X',
    },
         {
        id: 2,
        title: 'Title2',
        contentUrl: '/App/Modules/MyModule/Views/b.html',
        Type: 'Y',
    },
];

Method to change tab source based on let's say a button click (toggle)

            function filterTabsToDisplay() {
//vm.ToggleOption could be either X or Y
                vm.filteredTabs = _.filter(vm.tabItemsSource, function (tab) { return tab.Type === vm.ToggleOption; });
                vm.tabsToDisplay.data(vm.filteredTabs);
            }

Tab options:

//Below stuff can be removed; exists for logging purpose only
vm.tabOptions = {
    select: function (e) {
        console.log("Selected: " + e.item.innerText);
    },
    activate: function (e) {
        console.log("Activated: " + e.item.innerText);
    },
    show: function (e) {
        console.log("Shown: " + e.item.innerText);
    },
    contentLoad: function (e) {
        console.log("Content loaded in " + e.item.innerText);
    },
    error: function (e) {
        console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
    }
};

Tab selection:

function selectTab(tabToSelectId) {
    vm.tabToSelect = _.filter(vm.filteredTabs, function (tab) { return tab.id === tabToSelectId; })[0].title;
}

 

By default value of "vm.ToggleOption" is X which means 1 tab is shown to user. If I see the network tab when this happens, I see that "a.html" gets loaded dynamically. This page is an html page with angular controller attached. So the controller gets initialized as well. If I toggle to Y, "b.html" is loaded and its controller initialized. Everything is good so far.

Now, If I toggle back to X, "a.html" gets loaded again (I see this in network tab) which means the controller associated with this html gets initialized again. This is a problem because when the second load of "a.html" happens, the controller created during previous load already exists and hence I now have two instances of same controller which for me is a problem. If I continue to switch the toggle, every time, a new controller gets created which is quite problematic.

My question is, is this expected behavior when I use "k-data-content-url-field" option. Is there any way I can control this behavior so that it doesn't load the associated html every time?

Also, I have observed that this happens only when I change the bounded data source in some way (using filterTabsToDisplay method). If I have static tab strip like below, this problem doesn't arise.

    <div class="text-module" ng-if="vm.ToggleOption=='X'">
        <div kendo-tab-strip k-animation="false" id="tabstrip1" class="basic">
            <ul>
                <li class="k-state-active">
                    <span>Title1</span>
                </li>
            </ul>
            <div>
                <div ng-include="'/App/Modules/MyModule/Views/a.html'"></div>
            </div>

    <div class="text-module" ng-if="vm.ToggleOption=='Y'">
        <div kendo-tab-strip k-animation="false" id="tabstrip2" class="basic">
            <ul>
                <li class="k-state-active">
                    <span>Title2</span>
                </li>
            </ul>
            <div>
                <div ng-include="'/App/Modules/MyModule/Views/b.html'"></div>
            </div>
        </div>
    </div>
</div>

Regards,

Vinod

[Petyo]

Hello,

the case seems quite complex. I am not sure what you mean by "angular controller attached". Does the content of the page include the controller definition? To better understand the case, I may suggest that you re-create it in a plunker (as it supports multiple files). 

Regards,
Petyo
Telerik

 

 

[Vinod]

Hello,

What I mean is that I am trying to load angular views (and the view has controller associated with it using ng-controller). It's not just static html pages I am trying to load as in kendo samples.

Regards,

Vinod

[Petyo]

Hi,

Without a runnable sample, we may just guess what happens. If you can't provide one, I may suggest that you try an alternative approach - instead of using the tabstrip ajax load, you may try to nest a directive with templateUrl in each tab content. Perhap this will work better for your case. 

Regards,
Petyo
Telerik