Tabview costum templates not loading

Webix JS
1

I created a tabview linked with a list (outside of a the tabview), and in the cell variable (see below), I created a costum template.

var cells = [
        { header:"<span class='contacts_view'>Datatables</span>", body:{
            template:
            "<div class='contact_container'></div>"
            ,
        }},
        { header:"<span class='webix_icon fa-phone'></span><span class='phones_view'>Phones</span>", body:{
            template:
            "<div class='phone_container'></div>"
            ,
       }}
]

    webix.ui({
        view:"tabview",
        container:"layout_div",
        cells:cells
    });

When I click on a contact, it triggers the “onItemClick” which does :

    var list_users = webix.ui({
        view:"list",
        container:"list_users",
        select:true,
        url:"http://local/users/list",
        template:"#lastName# #firstName#",
        on: {
            "onItemClick":function(id){
                var linked_set_contacts  = new webix.DataCollection({
                    url: "http://local/contacts/user/" + id,
                });
                list_contacts.parse(linked_set_contacts);


                var linked_set_phones  = new webix.DataCollection({
                    url: "http://local/phones/user/" + id,
                });
                list_phones.parse(linked_set_phones);
            }
        }
    });

My problem is that every datatable (list_phones, list_contacts) is loaded when the page is loaded, but the view for phones does not exist at that point since only the first tab is visible.

Is there a way to load every tab ? Or maybe trigger the parse event on the tab click ?

2

As far as I can see you are using some outside-of-webix functionality to load content dynamically, right ?

As data loaded by pure HTML means, webix can’t be used to detect the loading moment. It possible to catch the moment when tab is become visible, maybe it will help

   webix.ui({
        view:"tabview",
        container:"layout_div",
        tabbar:{
           on:{
               onAfterTabClick:function(){ /*init content in the tab*/ }
           }
        },
        cells:cells
    });

Normally, you can define UI directly in the cells of tabview, so all UI will be initialized at app start ( it will not have any significant performance drawback )