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

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

score 5 · Answer 1 · answered Apr 25 '12 at 14:48

5

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.

answered Apr 25 '12 at 14:48

Eli

335
3
12

3

Thanks Man, You saved some hours for me. – Farhad Oct 16 '12 at 08:42

score 0 · Answer 2 · answered Apr 24 '12 at 16:15

0

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.

answered Apr 24 '12 at 16:15

Linus Thiel

38,647
9
109
104

Thanks, Linus. I fixed the things you pointed out (in my code, and in the question above) but unfortunately get the same result. – Eli Apr 24 '12 at 16:58
Cool. I think you missed the thing about the `for` loop though? At least in your question. You're still assigning to `data[-1]`. – Linus Thiel Apr 24 '12 at 17:15
In the loop `i` starts at 1 and goes to 10, but the index assignment is `data[i-1]` so I end up with a 10-item array, indexes 0-9. I've confirmed this by inspecting the array using a breakpoint in the browser javascript debugger. I'm going to try stepping through all of the inner SlickGrid javascript and see if I can figure out what's going on. – Eli Apr 24 '12 at 17:52
Ok, now I see that you changed it to `1`. That's a bit unorthodox but should work. Good luck! – Linus Thiel Apr 24 '12 at 19:54
I figured it out but as a new user I'm not allowed to self-answer my question yet. 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. – Eli Apr 24 '12 at 22:23

score 0 · Answer 3 · answered Aug 17 '12 at 15:22

0

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

answered Aug 17 '12 at 15:22

cspider

323
1
2
9

score 0 · Answer 4 · answered Apr 19 '13 at 19:55

0

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>

answered Apr 19 '13 at 19:55

Riz

6,486
19
66
106

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

4 Answers4