<div webix-ui view="tabview" autoheight="true" autowidth="true">
<div header="SearchPerfiles">
<div ui-view="perfilesSearch" autowidth="true"></div>
</div>
<div header="CreatePerfil">
<div ui-view="createPerfil" autowidth="true"></div>
</div>
</div>
the above div with a ‘header’ attribute represents a tabbar afaik. Is it possible to hook up a handler to onAfterTabClick in the html itself?
I would not want to configure the tabview on the js controller as that would break the above ui-view + ui router approach (am I wrong?)
The events can be attached within the <config>
tag:
http://webix.com/snippet/93c0980c
brilliant, works a treat! (I had implemented an inferior $timeout-based solution.) On my controller I can now invoke $state.go based on the clicked tab id ^.^
in the same vein, I need to establish on html what the initial tab will be. sth along the lines of (it does not work I should say)
<config name="selected" value="selectedViewName"></config>
in
<div webix-ui view="tabview" id="perfilesTabs" autoheight="true" autowidth="true">
<config name="tabbar">
<config name="on" onaftertabclick="perfilesTabClicked()"></config>
<config name="selected" value="selectedViewId"></config>
</config>
<div header="Search Perfiles" id ="perfilesSearchTab">
<div ui-view="perfilesSearch" autowidth="true"></div>
</div>
<div header="Create Perfil" id="createPerfilTab">
<div ui-view="createPerfil" autowidth="true"></div>
</div>
</div>
where selectedViewId corresponds to $scope.selectedViewId on the controller.
Any thoughts?
Initial tab can be set through the value
attribute in
<div webix-ui view="tabview" value="tab_id">
http://webix.com/snippet/e43dea36
That value is static, I would need to get it from the controller
<div webix-ui view="tabview" autoheight="true" autowidth="true"
value="selectedTabId">
where selectedTabId corresponds to $scope.selectedTabId on the controller, set during controller initialization
In this case you can use the following notation:
<div webix-ui view="tabview" value="{{selectedTabId}}">
http://webix.com/snippet/5afa5dde
brilliant stuff, for some reason I though webix would have taken over from angular on the ‘value’ attribute. Getting closer but not quite there yet - the problem now is that the tabview always renders the 1st view of the multiview control, no matter what tab has been selected. I was expecting tab and corresponding view always to be in sync…
Unfortunately, here I must confirm the bug in the tabview (and in the multiview as well). As a workaround, you can use onAfterRender event in the tabbar for showing the needed view:
<config name="on"
onaftertabclick="(function(id){webix.message(id);})"
onAfterRender="(webix.once(function(){$$(this.config.value).show(false, false)}))">
</config>
Where
Your workaround works (I can see the correct view if I inspect the html) but I cannot see it on the page - looks like the view height is 0px. This only happens if the initially selected tab is not the 1st one.
Rendered html excerpt:
<div class="webix_view webix_multiview" view_id="$multiview1" style="position: relative; border-top-width: 0px; margin-left: 0px; margin-top: 0px; width: 990px;
height: 1px;">
<div class="webix_view" view_id="createPerfilTab" style="border-width: 0px 1px 1px; width: 988px;
height: 0;">
<div class=" webix_template">
<div header="Create Perfil" id="createPerfilTab">
<!-- uiView: createPerfil -->
<div ui-view="createPerfil" autowidth="true" class="ng-scope">
<div webix-ui="formConfig" class="ng-scope" id="1468448650122">
In such case please try to define the height of the inner views:
http://webix.com/snippet/08dd9fcb
Cheers for that. As per your example your newly introduced
<div view="form" height="500">
would effectively replace the real content
<div ui-view="perfilesSearch" autowidth="true" ></div>
which is not what I’m after.
However, following your idea of explicitly setting the height, doing so at tabview level seems to ensure any view is displayed, no matter what tab is initially selected
<div webix-ui view="tabview" id="perfilesTabs"
height="800px"
autowidth="true"
value="{{vm.selectedViewId}}">
So I guess I can happily settle with that ^.^
As an aside, where in webix docs should I get started to find out more about html-based component definition+configuration details (as opposed to js-based)? I have been tasked with replacing some js-based components with their html counterpart, and I don’t seem to have come across much relevant info on your website.
Many Thanks
thanks for the links - I’m afraid that reading will not suffice and I will be needing you guys along the way - http://forum.webix.com/discussion/7268/html-markup-initialization#latest