Can we disable optionData header in tabbar?

Webix JS
#1

I have a tabbar with 2 header in options.
In first tab, I have a form view. When I change something in textbox , I want to disable other tab in tabbar. Can we do it?

webix.ui({ 

    rows:[
        {view:"tabbar", id:'tabbar', value:'formView', multiview:true, options: [
            { value: 'Form', id: 'formView'},
            { value: 'Empty', id: 'emptyView'}
        ]},

        {
          cells:[
            {

              	id:"formView",
              	view:"form",     
            	width:300,
            	elements:[ 
                  	{ view:"text", label:"Email"},
        			{ view:"text", type:"password", label:"Password"},
                ],

                  elementsConfig: {
                    bottomPadding: 18,
                    on: {                      
                      "onChange": function () {                                             
                      },
                      "onKeyPress": function () {
                        webix.message({type:"error", text:"Want to disable Other Tab"});
                      }
                    }
                  }
            },

             {id:"emptyView", template:"Some content"}

        ]}
    ]
});
#2

Hello,

Unfortunately, there’s no way to disable the particular tab, but you can use the addOption/removeOption API or disable the content of the second tab:

http://webix.com/snippet/01b14327

#3

Thanks for your suggestion. I just want to disable and don’t want to remove it. :). I’ll find another solution by setting css style.:slight_smile:

#4

Webix, is this feature in your future roadmap?
I think is useful you can have a disable tab, that is disabled the tab cell itself.
Same as binhtieu I will have to do a work around via CSS in order to get this.

#5

Hello,

We would rather not include it into the roadmap. Usually, it is better to hide inactive UI elements in the application rather than to disable. And again, you can always achieve the goal by CSS rules.

#6

For our situation, is useful to have disabled tabs.
In our app, a tab is disabled when user doesn’t have permissions to access a feature /that tab, but we don’t hide it, so user can request for that “feature” if interested.
For this reason, is important to us that tab looks disabled.

Is there a way to get tabbar options nodes from the tabbar view?

<div class="webix_item_tab webix_selected" button_id="tab 1" role="tab" aria-selected="true" tabindex="0" style="width:80px;">tab 1</div>

Is being a bit tricky to access that tab, we had to use jquery. Would be easier if tabbar view methods allow to get the child tabs (headers) nodes. If there is a way of getting that using webix, please let us know :slight_smile:

#7

@JoanaEsteves I’m using version 7.2 and the disabled feature was added :smile:

{view:"tabbar", id:'tabbar', value:'formView', multiview:true, options: [ { value: 'Form', id: 'formView'}, { value: 'Empty', id: 'emptyView', disabled: true} ]},

$$("tabbar").getOption("emptyView").disabled = true; $$("tabbar").render();