Slickgrid basic example - In node/express, only first row of data loads but is not visible
express, node.js, pug, slickgrid
Solution
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.
Problem
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); }); ```