4

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

4 Answers 4

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.

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

5
  • 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, 2012 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]. Apr 24, 2012 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, 2012 at 17:52
  • Ok, now I see that you changed it to 1. That's a bit unorthodox but should work. Good luck! Apr 24, 2012 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, 2012 at 22:23
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.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.