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

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);
    });

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.

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.

@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.

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>