On a popup window - tabView - form structure as per below, the form is not being rendered on the 1st tab view (Webix does not seem to be parsing it.) Content on the other tabs renders fine. For reutilisation’s sake, the form gets to the dom via an angular directive. I suspect the directive template arrives to the dom after webix is done with rendering… any insight really appreciated ^.^
page (note recipients-search-form directive tag)
<div webix-ui view="window" id="addRecipientsWindow" modal="true" height="600" width="900" move="true" webix-ready="addRecipientsWindowReady(root)">
<div view="head">
<div view="toolbar" stack="cols" margin="-4">
<div view="label" id="addRecipientsWindowTitleLabel" label="{{'AddRecipients'|translate}}"></div>
<div view="icon" id="addRecipientsWindowCloseIcon" icon="times-circle" click="hideAddRecipientsWindow()"></div>
</div>
</div>
<div view="body">
<div view="tabview" id="addRecipientsTabs" height="800px" autowidth="true">
<config name="tabbar">
<config name="on" onaftertabclick="addRecipientsTabClicked()"
onafterrender="(webix.once(function () { $$(this.config.value).show(false, false) }))"></config>
</config>
<div header="{{'TrabajadoresInternos'|translate}}" id="trabajadorInternoRecipientsTab">
<div view="layout" type="clean" borderless="true" autowidth="true">
<div view="layout" type="clean" borderless="true" autowidth="true" height="100">
<recipients-search-form block-id="trabajadorInterno"></recipients-search-form>
</div>
<div webix-ui="addTrabajadorInternoRecipientsGridConfig" webix-data="trabajadorInternoRecipients" type="clean" class="eg-datatable"></div>
<div view="layout" type="clean" borderless="true" autowidth="true">
<div view="cols" type="clean">
<div view="button" id="trabajadorInternoRecipientsHelpButton" height="40" type="imageTop"
image="/images/imagenes_aplicacion/Ayuda.png" label="{{'Help'|translate}}" autowidth="true" click="showHelp()"></div>
<div fillspace="true" type="clean"></div>
<div view="button" id="addTrabajadorInternoRecipientButton" height="40" type="imageTop"
image="/images/imagenes_aplicacion/anadir.png" label="{{'Add'|translate}}" autowidth="true" click="addCheckedTrabajadorInternoRecipients()"></div>
</div>
</div>
</div>
</div>
<div header="{{'TrabajadoresExternos'|translate}}" id="trabajadorExternoRecipientsTab">
<div view="layout" type="clean" borderless="true" autowidth="true">
<div view="layout" type="clean" borderless="true" autowidth="true" height="100">
<recipients-search-form block-id="trabajadorExterno"></recipients-search-form>
</div>
<div webix-ui="addTrabajadorExternoRecipientsGridConfig" webix-data="trabajadorExternoRecipients" type="clean" class="eg-datatable"></div>
<div view="layout" type="clean" borderless="true" autowidth="true">
<div view="cols" type="clean">
<div view="button" id="trabajadorExternoRecipientsHelpButton" height="40" type="imageTop"
image="/images/imagenes_aplicacion/Ayuda.png" label="{{'Help'|translate}}" autowidth="true" click="showHelp()"></div>
<div fillspace="true" type="clean"></div>
<div view="button" id="addTrabajadorExternoRecipientButton" height="40" type="imageTop"
image="/images/imagenes_aplicacion/anadir.png" label="{{'Add'|translate}}" autowidth="true" click="addCheckedTrabajadorExternoRecipients()"></div>
</div>
</div>
</div>
</div>
...
recipients-search-form directive template (note element ids are made unique on the directive link function, for each directive instance.)
<div webix-ui view="form" id="recipientsSearchForm" type="clean" width="800">
<div view="rows" type="clean">
<div view="cols" type="clean">
<div view="text" id="nombreText" label="{{'Nombre'|translate}}"></div>
<div view="text" id="apellidosText" label="{{'Apellidos'|translate}}"></div>
<div view="text" id="empresaNombreText" label="{{'Empresa'|translate}}"></div>
<div view="text" id="emailText" label="{{'Email'|translate}}"></div>
</div>
<div view="cols" type="clean">
<div fillspace="true" type="clean"></div>
<div view="button" id="getRecipientsButton" type="imageTop"
image="/images/imagenes_aplicacion/Buscar.png" label="{{'Search'|translate}}" click="getRecipients()" width="100" height="40"></div>
</div>
</div>
</div>
excerpt - html rendered for 1st tab directive template (ISSUE - NOT PARSED by webix, label and input elements are not being rendered)
<div class="webix_view webix_layout_clean" view_id="$layout4" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 100px;">
<div class="webix_view webix_form webix_layout_clean" view_id="trabajadorInternorecipientsSearchForm" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 69px;">
<div class="webix_scroll_cont">
<div class="webix_view webix_layout_clean" view_id="$layout5" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 69px;">
<div class="webix_view webix_layout_clean" view_id="$layout6" style="white-space: nowrap; border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 29px;">
<div class="webix_view webix_control webix_el_text"
view_id="trabajadorInternonombreText"
style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 200px;
height: 29px;"/>
excerpt - html rendered for 2nd tab directive template (PARSED OK by webix, note the label and input elements)
<div class="webix_view webix_layout_clean" view_id="$layout11" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 100px;">
<div class="webix_view webix_form webix_layout_clean" view_id="trabajadorExternorecipientsSearchForm" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 69px;">
<div class="webix_scroll_cont">
<div class="webix_view webix_layout_clean" view_id="$layout12" style="border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 69px;">
<div class="webix_view webix_layout_clean" view_id="$layout13" style="white-space: nowrap; border-width: 0px; margin-left: 0px; margin-top: 0px; width: 800px; height: 29px;">
<div class="webix_view webix_control webix_el_text" view_id="trabajadorExternonombreText" style="display: inline-block; vertical-align: top; border-width: 0px; margin-top: 0px; margin-left: 0px; width: 200px; height: 29px;">
<div class="webix_el_box" style="width:200px; height:29px">
<label style="width: 80px;text-align: left;line-height:25px;" onclick="" for="1472545797692" class="webix_inp_label ">Name</label>
<input id="1472545797692" type="text" value="" style="width: 116px; text-align: left;">
</div>
</div>