CODEWITHSUNDEEP
javascriptdojo
Matej
Matej

Reputation: 942

add TabContainer to Dialog programmatically

I'm trying to generate TabContainer and add it to the Dialog dijit programmatically:

    gridsDiv = domConstruct.create('div');
gridsDiv_inner = domConstruct.create('div', { id: 'gridsDiv_innerId', style: "width: 600px; height: 600px" });

var tc = new TabContainer({
    style: "height: 100%; width: 100%;"
}, "gridsDiv_innerId"
);

var cp1 = new ContentPane({
    title: "Food",
    content: "We offer amazing food"
});

tc.addChild(cp1);

var cp2 = new ContentPane({
    title: "Drinks",
    content: "We are known for our drinks."
});

tc.addChild(cp2);
tc.startup();
gridsDiv.appendChild(gridsDiv_inner);

dialogWindow = new Dialog({
    title: 'Attribute data',
    content: gridsDiv,
    'class': 'nonModal',
    style: "width: 600px"
});

The code above returns an empty Dialog. I need the same functionality achieved by markup in this example, but I need to dynamically generate tabs and their content.

Upvotes: 0

Views: 956

Answers (1)

vivek_nk
vivek_nk

Reputation: 1600

For dojo Dialog, the content shall only be text. Nothing else. If href is used, the url must return text as response. This is the rule. Here, the tab container object - tc, is a DOM node, which cannot be set inside Dialog using its content attribute. Rather, the tab container need to be attached to the Dialog programmatically.

var tc = new dijit.layout.TabContainer({
    style: "height: 100%; width: 100%;"
});
var cp1 = new ContentPane({
    title: "Food",
    content: "We offer amazing food"
});

tc.addChild(cp1);

var cp2 = new ContentPane({
    title: "Drinks",
    content: "We are known for our drinks."
});

tc.addChild(cp2);

var d = new dijit.Dialog({style: "height: 50%; width: 60%;"});
d.addChild(tc);
d.show();

The "addChild" method is to append the DOM objects to the Dialog's containerNode (contentPane). This must be used for programmatic purposes. (Similarly we have 'removeChild' method viceversa).

Upvotes: 1

Related Questions