Dgrid does not render after domConstruct.place

Dgrid does not render after domConstruct.place

I have a dgrid with its own headers and data store, and I would like to
switch it out with another dgrid when a tab is clicked. The code below
sucessfully replaces grid1 with grid2 (firebug shows it in the DOM), but
the content panel that contained grid1 is left empty. Does anyone have an
idea why grid2 never renders? Note: this is AMD dojo
// create the dgrid
window.grid = new (declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
//data derived from ArcGIS server database
}
}, "grid1");
window.grid2 = new(declare([Grid, Selection]))({
bufferRows: Infinity,
columns: {
//columns derived from ArcGIS server database
}
}, "grid2");
//on click event
var tab2 = query("#dijit_layout_TabContainer_0_tablist_panel2");
on(tab2, "click", showSecondGrid);
//function to switch grid1 with grid2
function showSecondGrid(){
var otherGrid = domConstruct.toDom("<div id='grid2'
style='width:100%;height:100%;'
data-dojo-props='rowsPerPage:'5', rowSelector:'10px',
autoheight:'true', autowidth:'true''></div>");
return domConstruct.place(otherGrid, "grid1", "replace");
parser.parse(dom.byId("grid2"));
};
And here is how grid1 appears in the body
<div id="rightPanel_content" class="panel_content"
dojotype="dijit/layout/ContentPane">
<div id="grid1" style="width:100%;height:100%;"
data-dojo-props="rowsPerPage:'5',
rowSelector:'10px', autoheight:'true',
autowidth:'true'">
</div>
</div>