Hi,
I am new to Dojo and I am trying to populate the grid with data dynamically. I am facing a problem that first row in the grid is overlapping with grid header. Following is the code I am using.
<head>
<title>Dynamic Grid</title>
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/soria/soria.css";
@import "dijit/demos/mail/mail.css";
@import "dojox/grid/_grid/tundraGrid.css";
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dojox.layout.ContentPane");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
var data = [
// Skill Code, Short name & description
[ '001', 'JS', 'Java Script for browser' ],
[ '002', '.Net', 'MS DotNet 3.5' ],
[ '003', 'J2EE', 'Java 2 Enterprise Edition' ],
[ '004', 'EJB', 'Enterprise Java Beans' ]
];
var model = new dojox.grid.data.Table(null, data);
var subrow = [
{ name: 'Code' },
{ name: 'Name' },
{ name: 'Description',width: '200px' }
];
var view = {rows: [ subrow ] };
var structure = [ view ];
</script>
</head>
<body class="soria">
<H1>Dynamic Grid </H1>
<BR>
<div dojoType="dijit.layout.LayoutContainer" id="main">
<div dojoType="dojox.layout.ContentPane" id="content" jsId="content" layoutAlign="client">
<div id="grid" dojoType="dojox.Grid" model="model" structure="structure"></div>
</div>
</div>
</body>
<title>Dynamic Grid</title>
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/soria/soria.css";
@import "dijit/demos/mail/mail.css";
@import "dojox/grid/_grid/tundraGrid.css";
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dojox.layout.ContentPane");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
var data = [
// Skill Code, Short name & description
[ '001', 'JS', 'Java Script for browser' ],
[ '002', '.Net', 'MS DotNet 3.5' ],
[ '003', 'J2EE', 'Java 2 Enterprise Edition' ],
[ '004', 'EJB', 'Enterprise Java Beans' ]
];
var model = new dojox.grid.data.Table(null, data);
var subrow = [
{ name: 'Code' },
{ name: 'Name' },
{ name: 'Description',width: '200px' }
];
var view = {rows: [ subrow ] };
var structure = [ view ];
</script>
</head>
<body class="soria">
<H1>Dynamic Grid </H1>
<BR>
<div dojoType="dijit.layout.LayoutContainer" id="main">
<div dojoType="dojox.layout.ContentPane" id="content" jsId="content" layoutAlign="client">
<div id="grid" dojoType="dojox.Grid" model="model" structure="structure"></div>
</div>
</div>
</body>
If any one is having idea why this is happening it will be great.
Regards,
Vikas Kapoor
I think it has to do with
I think it has to do with the styles, look at some of the Grid sampes withing dojox for other style sheets to include in your code.
Thanks. It is fixed after
Thanks.
It is fixed after changing grid style to other than soria. Probably when body and grid style is same then it does not work. (at least for soria class).
regards,
vikas kapoor