Dojo adding declarative code using domConstruct to existing accordion

Question

I have an accordion that has content panes added in a programmatic way. In one of the pane I want to add a tab container which has many tabs. Each tab has many controls that needs to be created dynamically. But creating it dynamic way gives me hard time. I decided to take the different approach to add it using domConstruct.place. I have the design of the code done declarative way and it in separate html pages for each tab. Then I try to add the entire tab container to the existing accordion's content pane as a child.

Only the text content appears on the screen but there is no tab container control in place.

Here is the code:

require(["dgrid/OnDemandGrid", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dgrid/Selection", 
            "dgrid/Keyboard", "dojo/_base/declare", "dojo/store/JsonRest", "dojo/store/Observable", "dojo/store/Memory", "dijit/registry", "dgrid/extensions/DijitRegistry", 
            "dgrid/extensions/Pagination", "dgrid/extensions/CompoundColumns", "dgrid/extensions/ColumnResizer", "dojo/dom-construct", "dojo/text!../App/tab.html", "dojo/domReady!"],
                function(Grid, ContentPane, AccordionContainer, TabContainer, Button, Selection,
                        Keyboard, declare, JsonRest, Observable, Memory, registry, DigitRegistry, 
                        Pagination, CompoundColumns, ColumnResizer, domConstruct, tabHtml){

                    var aContainer = registry.byId('accord');

                    if (!aContainer) {
                        console.log('Accordion does not exist');
                        aContainer = new AccordionContainer({style:"width: auto; height: 680px;"}, "accord");
                    }

//Grid creation part goes here. Grid appears and events works.

var cpid = "acordcp1_tc_cp1_" + getRandomNumber();
var cp1 = new ContentPane({id: cpid, title: "pane1", content: grid});

aContainer.addChild(cp1);
aContainer.startup();
aContainer.selectChild(cp1);
aContainer.resize();

console.log("TAB HTML", tabHtml);
var tb1 = domConstruct.create("div", {innerHTML: tabHtml}, cpid, "first");

}

//Here is the sample tab container declarative code from dojotoolkit tutorial that I'm trying to get it on accordion's content pane.

<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
        Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
        Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
        Lorem ipsum and all around - last...
    </div>
</div>

But what I get is:

Lorem ipsum and all around... Lorem ipsum and all around - second... Lorem ipsum and all around - last...

yes, only the text appears on the accordion's content pane along with the grid control.

Also the dojo config I have is:

<script type="text/javascript"
    djconfig="isDebug: true, parseOnLoad: true" src="dojo/dojo/dojo.js"></script>

What am I doing wrong?

Is this approach not correct? what are the suggestions?

I really appreciate the help. Thanks.

Ram

Answer 1

The dojo parser is what turns your markup into dojo widgets and dijits. It runs once on the loading of the page. You need to run it on your markup after it is added to the page. You have two options.

1. Wait to run the parser. Set parseOnLoad to false in your config and then call parser.parse() in your code after you have added your markup.

2. Run the parser again on your new div.

   parser.parse(tb1)

The second way is necessary if you have other declarative code that needs to be shown first.