how to hook up to tabbar onAfterTabClick when the tabbar was defined in html

Webix JS
#1 
<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?)

#2

The events can be attached within the <config> tag:

http://webix.com/snippet/93c0980c

#3

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 ^.^

#4

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?

#5

Initial tab can be set through the value attribute in

<div webix-ui view="tabview"  value="tab_id">

http://webix.com/snippet/e43dea36

#6

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

#7

In this case you can use the following notation:

<div webix-ui view="tabview"  value="{{selectedTabId}}">

http://webix.com/snippet/5afa5dde

#8

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…

#9

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

#10

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">
#11

In such case please try to define the height of the inner views:

http://webix.com/snippet/08dd9fcb

#12

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

#13

There are several articles that will be helpful:

General information about the html/xml markups in Webix

Configuration of the HTML markups

Integration with Angular JS

Markup samples

Angular samples

#14

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