Dojox datagrid data vanishes when clicking the header row

Question

I have a table that contains multiple rows. In one row I have two datagrids that load up properly with the data that is provided but if the header column is clicked then the entire data of the grid just vanishes and the rows beneath the grid row move up. I am only showing the one item but the results are the same.

 function addRow(){
    var mainRow = document.createElement("tr");
    var table = document.createElement("table");
    var tbody = document.createElement("tbody ");
    var row = document.createElement("tr");
    var cell = document.createElement("td");
    cell.setAttribute("valign", "top");
    cell.setAttribute("rowspan", "top");
    cell.setAttribute("colspan", "top");
    var grid = new dojox.grid.DataGrid({
        id: "permGrid",
        elasticView: "2",
        selectionMode: "single",
        autoWidth: "true",
        autoHeight: "true",
        rowCount: "3",
        query: {elementID:'*'},
        store: new dojo.data.ItemFileWriteStore({data:{items:[]}}),
        structure: [{field: 'beanName', name: 'Name', editable: "false", width:'160px' }]
    }).placeAt(cell);
    grid.attr("class", "soria");
    grid.startup();
    row.appendChild(cell);
    tbody.appendChild(row);
    table.appendChild(tbody);
    mainRow.appendChild(table);
    return mainRow;
}