EnhancedGrid in a TabContainer not working

Question

I've been beating my head against the wall on this one for a while. I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.

I have an enhancedGrid on top and a tabContainer on the bottom. The idea is to click on an item on the top and show different related data on the bottom tabs.

The top grid is displayed correctly (I've removed all the plugins to save on space). The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.

Thank you in advance for your help! Chris

Here is my sourcecode:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
 xmlns:c="http://java.sun.com/jsp/jstl/core"
 xmlns:spring="http://www.springframework.org/tags"
 xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
 version="2.0" style="margin-bottom:3px">
 <jsp:output omit-xml-declaration="yes"/>

<style type="text/css">
    <spring:message code="dojo_version" var="dj" />

    @import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
    @import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
    @import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";

    #accountDiv {height:15em; width:100%;}
    #contactDiv {height:100%; width:100%;}
</style>

<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.EnhancedGrid");
    dojo.require("dojox.grid.enhanced.plugins.Filter");
    dojo.require("dojox.grid.enhanced.plugins.Pagination");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dojox.layout.ContentPane");

    dojo.ready(function() {
        accountSetup();
        contactSetup();
    });

    function accountSetup() {
        var layout = [[
         { field: 'name', name: 'Name', width: '15%' },
         { field: 'description', name: 'Description', width: '14%' },
         { field: 'website', name: 'Website', width: '15%' },
         { field: 'numberEmployees', name: '# Emp', width: '5%' },
         { field: 'taxId', name: 'Tax ID #', width: '8%' },
         { field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
         { field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
        ]];

        var accountGrid = new dojox.grid.EnhancedGrid({
            id: 'accountGrid',
            selectionMode: "single",
            structure: layout,
            noDataMessage: "No accounts found"
        }, document.createElement('div'));

        dojo.xhrGet({
            url: "${pageContext.request.contextPath}/accounts/allShallow",
            headers: {"Accept": "application/json"},
            handleAs: "json",
            load: function(data) {
                accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
            },
            error: function(error) {
                console.log("loading of grid data failed. Exception...", error);
            }
        });

        dojo.byId("accountDiv").appendChild(accountGrid.domNode);
        accountGrid.startup();
    };

    function contactSetup() {
        var layout = [[
        { field: 'name', name: 'Name', width: '15%' },
        { field: 'description', name: 'Description', width: '14%' },
        { field: 'website', name: 'Website', width: '15%' },
        { field: 'numberEmployees', name: '# Emp', width: '5%' },
        { field: 'taxId', name: 'Tax ID #', width: '8%' },
        { field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
        { field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
        ]];

        var contactGrid = new dojox.grid.EnhancedGrid({
            id: 'contactGrid',
            selectionMode: "single",
            structure: layout,
            noDataMessage: "No accounts found"
        }, document.createElement('div'));

        dojo.xhrGet({
            url: "${pageContext.request.contextPath}/accounts/allShallow",
            headers: {"Accept": "application/json"},
            handleAs: "json",
            load: function(data) {
                contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
            },
            error: function(error) {
                console.log("loading of grid data failed. Exception...", error);
            }
        });

        dojo.byId("contactDiv").appendChild(contactGrid.domNode);
        contactGrid.startup();
    };
    </script>

    <div>
        <util:panel title="Accounts" id="accountPanel">
            <div id="accountDiv" />
        </util:panel>
    </div>

    <div style="height:346px; width:100%">
        <div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">

            <div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
               <div id="contactDiv" />
            </div>

            <div data-dojo-type="dojox.layout.ContentPane" title="Projects">
               123
            </div>

          </div>
     </div>
</div>

Answer 1

How about directly targeting the desired <div> instead of creating a new one?

Eg.

var contactGrid = new dojox.grid.EnhancedGrid({  
        id: 'contactGrid',  
        selectionMode: "single",  
        structure: layout,  
        noDataMessage: "No accounts found"  
}, "contactDiv");

Answer 2

Have you tried to use placeAt instead of appendChild

yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();

Answer 3

You can just add css class to the grid,

 <style type="text/css">
      #accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
      #contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
 </style>

and now import the following when you want the grid to display your tabs to be displayed

 dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');

here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.