I have a set of tabs with child tabs. I need to get the id of each tab when it is clicked. I first found the watch function built into the dojo TabContainer object:
myTabContainer.watch("selectedChildWidget", function(name, oval, nval){
console.log("selected child changed from ", oval, " to ", nval);
});
This works for parent tabs, but not for child/nested sub tabs. My only clue is that the child tabs are ContentPane objects and not TabContainer objects.
I also tried this, which also works only for parent tabs:
var tcmainid = tcmain.id;
dojo.connect(dijit.byId(tcmainid), "selectChild", function(page){console.log("Page ID: " + page.id)});
Here is my tab creation code:
var tcmain = new TabContainer({doLayout: false}, 'htmlDDIVid');
var parentTab1 = new ContentPane({title: "Tab1", content: gridx1});
var parentTab2 = new TabContainer({title: "Tab2", doLayout: false, nested: true});
var parentTab2SubTab1 = new ContentPane({title: "SubTab1", content: sub1Gridx});
var parentTab2SubTab2 = new ContentPane({title: "SubTab2", content: sub2Gridx});
parentTab2.addChild(parentTab2SubTab1);
parentTab2.addChild(parentTab2SubTab2);
tcmain.addChild(parentTab1);
tcmain.addChild(parentTab2);
How do I get the id for my child/nested sub tabs?
Best How To :
I figured it out. I tried a couple of different methods but only this one worked for child tabs. Here is my solution:
Using:
"dijit/registry",
"dojo/on",
in my dojo require statement.
myGridxID is the TabContainer id that lives in my HTML page's DIV where my TabContainer is drawn that houses all my tabs and subtabs, with every leaf tab having a gridx.
// Pickup the onClick and get the ID of the tab or sub tab being clicked, this is used in the case switch statement for updating the grid accordingly
var tabContainerPanel = registry.byId('myGridxID'); //get dijit from its source dom element
on(tabContainerPanel, "Click", function (event) {
selectedTabString = tabContainerPanel.selectedChildWidget.title;
if (typeof tabContainerPanel.selectedChildWidget.selectedChildWidget !== 'undefined'){
// There are no child tabs, parent tab only
selectedTabString = tabContainerPanel.selectedChildWidget.selectedChildWidget.title;
}
The issue I then ran into is that the clicks are picked up for the current tab inside the gridx. I'm bypassing this with an if statement:
if (selectedTabString !== prevSelectedTabString){
to check and see if the current gridx I am clicking on is the same as the one I had just selected and then it ignores the clicks or I should say ignores the code I have when a tab is clicked. When a tab is clicked in my code I have it update that tabs Gridx.
