tabstrip - Ajax loaded tab behavior

4 posts, 0 answers
  1. Vinod
    Vinod avatar
    2 posts
    Member since:
    May 2014

    Posted 30 Mar Link to this post

    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

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Vinod
    Vinod avatar
    2 posts
    Member since:
    May 2014

    Posted 01 Apr in reply to Petyo Link to this post

    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

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready