Slickgrid basic example - In node/express, only first row of data loads but is not visible - node.js

Question

I'm trying to run a barely modified version of SlickGrid's example1-simple.html. I'm on Mac OS X Lion, seeing the same behavior with Chrome/Safari/Firefox. Once I have all of the CSS/JS dependencies in place I can directly load the example HTML page (and my slightly modified version) without any trouble. However when I try to serve basically the same page with node/express/jade (using res.render()), the header (column names) row loads, and looking through the rendered HTML I can see that the first row of my data loads but I don't see it in the browser (I'm trying to load 10 rows of data). All of the relevant CSS/JS files seem to be loading properly and I don't see any errors either in the browser console or my node console. I've copied the entirety of the grid-canvas div below.
<div class="grid-canvas" style="height: 250px; width: 240px; ">
<div class="ui-widget-content slick-row even" row="0" style="top:0px">
<div class="slick-cell l0 r0">Battery test #1.csv</div>
<div class="slick-cell l1 r1">1024</div>
<div class="slick-cell l2 r2">1335237255112</div>
</div>
</div>
I'm pretty sure the JavaScript is all right, as it pretty much exactly matches the example HTML page and runs fine when I substitute it in the example1-simple.html document and access it directly. Also when rendering the page with express I can set a breakpoint in my browser at the new Slick.Grid() call and see that the 10-item array of row data is being sent, just not ultimately rendered.
I have basic old-school debug skills (once upon a time I did a lot of Windows programming in VB) but I'm very open to suggestions as to relevant debug tools and techniques I could bring to bear on this type of problem.
Here is my layout.jade:
!!!
html
head
title= title
link(rel="stylesheet", href="/stylesheets/slick.grid.css", type="text/css")
link(rel="stylesheet", href="/stylesheets/css/smoothness/jquery-ui-1.8.19.custom.css", type="text/css")
body!= body
And the jade page with my test code:
#content
#fileGrid
script(src="/javascripts/lib/jquery-1.7.2.js")
script(src="/javascripts/lib/jquery.event.drag-2.0.min.js")
script(src="/javascripts/lib/slick.core.js")
script(src="/javascripts/lib/slick.grid.js")
script
var grid;
var columns = [
{id: "fileName", name: "File Name", field: "fileName"},
{id: "fileSize", name: "File Size", field: "fileSize"},
{id: "lastUpdate", name: "Last Updated", field: "lastUpdate"} // use mtime
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
var timeStamp = new Date();
var numRows = 10;
var data = [];
for (var i = 1 ; i <= numRows ; i++) {
data[i-1] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString()
}
};
grid = new Slick.Grid("#fileGrid", data, columns, options);
});

Answer 1

I figured it out. The problem was that I didn't specify a size for my #fileGrid div either in my jade/html or anywhere else in the css, and SlickGrids seemed to assume that the size was zero, and thus didn't render any rows. I changed the jade declaration to #fileGrid(style="width:500px; height:600px) and that fixed it. In retrospect that was really the only thing different between my jade page and the html example.

Answer 2

This looks fishy:
for (var i = 0 ; i <= numRows ; i++)
data[i-1] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString(),
};
Why data[i-1] and i <= numRows? You're trying to assign to data[-1] up until data[numRows], where you should assign to data[0] until data[numRows - 1].
On a side note, I would wrap that for loop in braces, even though it's not strictly necessary. Also, the trailing comma (on the last row) will break in Internet Explorer:
for (var i = 0 ; i < numRows ; i++) {
data[i] = {
fileName: "Battery test #" + i + ".csv",
fileSize: i * 1024,
lastUpdate: Date.now().toString()
};
}
You also have a trailing comma in your columns assignment.

Answer 3

#BRValentine, you are right. Slickgrid grid container element must be given an height (width is optional - by default uses 100% available). If you do not provide an height to the container element, Slickgrid does not render the rows.

Answer 4

specifying the target grid div dimensions solved my problem. This is nowhere in instructions... I'm leaving it here so that others can find it.
<div id="classGrid" style="width:500px; height:600px;"></div>