topic Re: Tabcontainer change on button click in ArcGIS JavaScript Maps SDK Questions

Tabcontainer change on button click

IbrahimHussein — Thu, 28 Aug 2014 16:30:39 GMT

<div data-dojo-type="dijit.layout.TabContainer">
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'">
           
     </div>   
       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'">
    </div>
  </div>

<div data-dojo-type="dijit.layout.TabContainer">

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'">



     </div>

       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'">

</div>

</div>

Hey guys, im trying to figure out how to switch between the tabs from a button (rather than pressing on the tab itself) is there a way to do this?

edit - answer: give the div of the tabcontainer and the tab itself an id tag

<id="tabconID" div data-dojo-type="dijit.layout.TabContainer">

for tab itself: <div id="tab1Name" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'"></div></div>

then in your javascript section do

//declare tab
var tc = registry.byId("tabconID");

//use to select tab

tc.selectChild(registry.byId("tab1Name"));

Re: Tabcontainer change on button click

KellyHutchins — Thu, 28 Aug 2014 17:09:58 GMT

You can use the selectChild method to select the tab. There's an example and some more info in the dojo doc for the dijit/layout/TabContainer — The Dojo Toolkit - Reference Guide .

require(["dijit/registry", "dijit/layout/ContentPane"], function(registry, ContentPane){

var tabs = registry.byId("myTabContainer");

var pane = new ContentPane({ title:"Remote Content", href:"remote.html" });

tabs.addChild(pane);

tabs.selectChild(pane);

});

Re: Tabcontainer change on button click

IbrahimHussein — Thu, 28 Aug 2014 18:41:57 GMT

Thanks that got me in the right direction. Only thing that doesn't work for me is when I add a new tab programmatically, the content doesn't appear. I get a blank button (if there is no tabContainer in the function declaration) and a blank select field if there is a tabContainer in the function declaration.

See here: jsfiddle

Re: Tabcontainer change on button click

KellyHutchins — Thu, 28 Aug 2014 20:22:55 GMT

Here's a revised version of your fiddle showing the new tab. One place I often check when trying to figure out how to do something with one of dojo's widgets is the dojo nightly tests. Visit the TabContainer Demo and you'll see that it shows how to do things like add a tab, rename tabs and place the tabs in various locations.

These tests are available for many of dojo's widgets and are often invaluable when trying to learn how to use them.

Re: Tabcontainer change on button click

IbrahimHussein — Thu, 28 Aug 2014 20:27:38 GMT

Thanks, will check out.