Position of programmatically created grid, cell header position.

Hi. I am creating a grid programmatically, and I have the following problems:

* I can't get the grid to position where I want unless I use a BorderContainer to put the grid in.
* Cell headers are printed over the first row of data in the grid
* Tundra CSS theme seems not to be working.

Why do I need BorderContainer? How do I fix the cell headers? How do get the tundra theme to work?

Full working code example (Sorry for long post, i cut the file into blocks for highlighting).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>

@import "/js/dojo-release-1.1.0/dojox/grid/_grid/tundraGrid.css";
@import "/js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
@import "/js/dojo-release-1.1.0/dojo/resources/dojo.css"
</style>
<style>
body {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.dojoxGrid-row-editing td {
background-color: #F4FFF4;
}
.dojoxGrid input, .dojoxGrid select, .dojoxGrid textarea {
margin: 0;
padding: 0;
border-style: none;
width: 100%;
font-size: 100%;
font-family: inherit;
}
.dojoxGrid input {
}
.dojoxGrid select {
}
.dojoxGrid textarea {
}
#controls {
padding: 6px 0;
}

</style>
<script type="text/javascript" src="/js/dojo-release-1.1.0/dojo/dojo.js"
djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript">

dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojox.grid._data.dijitEditors");
dojo.require("dojo.parser");

function addGrid(parent)
{
dojo.declare("dojox.grid.editors.NumberTextBox", dojox.grid.editors.Dijit, {
   editorClass: "dijit.form.NumberTextBox"
   });
var data = [['A','1'],['B','2'],['C','3']];
var rowbar = {
type: 'dojox.GridRowView', width: '20px'
};
var view1 = { cells: [ [ {name: 'Name'}, {name: 'Phone', editor: dojox.grid.editors.NumberTextBox} ] ] };
var layout = [rowbar,view1];
var model = new dojox.grid.data.Table(null, data);
var grid = new dojox.Grid({
autoHeight: true,
autoWidth: true});
parent.addChild(grid);
grid.setModel(model);
grid.setStructure(layout);
grid.update();
grid.startup();
}

function createGrid(fieldName)
{
var paramInput = dojo.byId('mydiv');
var gridContainer = document.createElement('div');
   gridContainer.style.width = '30em';
   gridContainer.style.height = '30em';


   paramInput.appendChildNode(gridContainer);
var bc = new dijit.layout.BorderContainer({design: "sidebar"},gridContainer);
var grid = addGrid(bc);
bc.startup();
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="blah">
Hello
</div>
<div id="mydiv">
</div>
<button onclick="createGrid('test')">Create</button>
</body>
</html>

Search

Position of programmatically created grid, cell header position.

Removing tundra css made everything better