TabContainer hide tabs by title

[JamesCrandall]

WAB 2.19

JS 3.x

Inherited a custom widget that has TabContainer implemented and attempting to hide tabs by title.  Removing the TabContainer altogether isn't an option as there is a ton of js that would have to be reworked and prefer to just have a simple loop to hide elements.

I'm able to setup a loop over the tabs and successfully evaluate on title but not able to apply the correct method to hide the tab.

 _initTabContainer: function() {
        var tabs = [];
        tabs.push({
          title: 'Water Use',
          content: this.tabNode1
        });
        tabs.push({
          title: 'ERP',
          content: this.tabNode2
        });
        tabs.push({
            title: 'OKEE',
            content: this.tabNode3
        });
        tabs.push({
            title: 'ERC',
            content: this.tabNode4
        });
        
		this.selTab = 'ERP';

        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);
        this.tabContainer.startup();
   
        //this is where I'm attempting to hide tabs
		for (var i = 0; i < this.tabContainer.tabs.length; i++) { 
			if (this.tabContainer.tabs[i].title == 'Water Use'){
				this.tabContainer.tabs[i].style.display ='none' //error: Cannot set properties of undefined (setting 'display')				
			}
			
		}
        
        this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function (title) {
            if (title == 'ERP') {
                this.currentTab = 'ERP'}
            else if (title == 'Water Use'){
                this.currentTab = 'WU'
            }
            else if (title == 'OKEE'){
                this.currentTab = 'OKEE'
            }
            else if (title == 'ERC') {
                this.currentTab = 'ERC'
            }
            
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      },

[KenBuja]

The TabContainer3  does have a removeTab method. Can you use that instead? It looks like you supply the title of the tab, from what I can tell from the code (found in client\stemapp\jimu.js\dijit\TabContainer3.js).

[JamesCrandall]

Thanks for the input -- I change TabContainer to TabContainer3 but don't see that it has any removeTab or remove method (probably not implementing correctly tho:

        this.selTab = 'Water Use';
        this.tabContainer = new TabContainer3({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);
        this.tabContainer.startup();
		for (var i = 0; i < this.tabContainer.tabs.length; i++) { 
			if (this.tabContainer.tabs[i].title == 'Water Use'){
				this.tabContainer.tabs[i].removeTab();
				//this.tabContainer.tabs[i].style.display ='none' //error: Cannot set properties of undefined (setting 'display')				
			}			
		}

[KenBuja · Accepted solution]

See if this works

this.tabContainer.removeTab('Water Use');

[JamesCrandall]

Yep!  Thank you!