PDA

View Full Version : Grid disappears after render()



cfxram
24 Oct 2006, 1:29 PM
Jack, Thank you for the excellent js library. I am trying out the grid component and am having difficulty getting it to work. The grid renders with the correct columns, and the data displays for a split second and then it disappears. The grid columns are still visible. I am using Firefox 1.5.0.7. - Thanks!

Here is my code:



<link rel="stylesheet" type="text/css" href=yui-ext.32.3.1/resources/css/grid.css/>
<link rel="stylesheet" type="text/css" href="yui/build/reset/reset.css"/>
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/dom/dom.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="yui/build/animation/animation.js"></script>
<script type="text/javascript" src="yui/build/connection/connection.js"></script>
<script type="text/javascript" src="yui-ext.32.3.1/yui-ext.js"></script>

<style>
body{font:normal 9pt verdana; margin:10px;}
#description{
margin:10px;
width:500px;
}
#mygrid{
width:700px;
}
</style>

<script>
var jsonData2 = eval({
records:[
{firstName:'we',lastName:'we',projectId:804,requestStatus:'Requested'},
{firstName:'baja',lastName:'brain',projectId:852,requestStatus:'Requested'},
{firstName:'3creekTest1',lastName:'we',projectId:804,requestStatus:'Requested'},
{firstName:'3creekTest2',lastName:'we',projectId:804,requestStatus:'Requested'},
]
});
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
function buildBasicTable(){
// column model
var cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "First Name", width: 330,sortable: true, sortType: sort.asUCString},
{header: "Last Name", width: 100,sortable: true, sortType: sort.asUCString},
{header: "Project", width: 40, sortable:true, sortType:sort.asInt},
{header: "Status", width: 150,sortable: true, sortType: sort.asUCString},
]);

// data model
var dm = new YAHOO.ext.grid.JSONDataModel({
root: 'records',
id: 'projectId',
fields: ['firstName', 'lastName', 'projectId', 'requestStatus']
});
dm.loadData(jsonData2);

// build grid
var grid = new YAHOO.ext.grid.Grid('mygrid', dm, cm);
grid.render();
grid.getSelectionModel().selectFirstRow();

}
YAHOO.util.Event.addListener(window,"load",buildBasicTable);
</script>


<body>

<div id="mygrid">(the id of this div is set to "mygrid")</div>

</body>
</html>

jay@moduscreate.com
24 Oct 2006, 2:52 PM
THere is some stuff missing there that i think would help like the CSS Definitions,etc?

cfxram
24 Oct 2006, 3:38 PM
Oops. Didn't check the "disable html" in the post. The correct code should be displayed in the first post.

jack.slocum
24 Oct 2006, 4:19 PM
#mygrid needs a height. You will also want to set it to overflow:hidden if there is any dynamic sizing going on.

jbowman
24 Oct 2006, 4:57 PM
var cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "First Name", width: 330,sortable: true, sortType: sort.asUCString},
{header: "Last Name", width: 100,sortable: true, sortType: sort.asUCString},
{header: "Project", width: 40, sortable:true, sortType:sort.asInt},
{header: "Status", width: 150,sortable: true, sortType: sort.asUCString},
]);


You also have the dreaded extra comma in there, that causes ie to misbehave.

jack.slocum
24 Oct 2006, 5:02 PM
Nice catch jbowman. That would also be a problem!

jbowman
24 Oct 2006, 5:05 PM
I've done it so many times I look for it first when I have javascript behaving weirdly in IE :lol:

cfxram
24 Oct 2006, 6:56 PM
Thanks Jack.

And thank you jbowman. I hadn't even gotten that far in testing. I saw the error and realized it would've been a big pain to debug.