javascript SlickGrid column width

Question

I am trying to implement a simple editable table using SlickGrid using example1_simple (found here http://mleibman.github.com/SlickGrid/examples/example1-simple.html) as a template, but its gone terribly wrong.

My grid has to fit within a tab on the form that is 280 pixels wide and will have 3 columns (id, X, Y). The id will be autoincrementing and x & y will be blank, but for testing I am putting a gradually lengthening string in each cell so on the first row it should read 0, a, b and the second row would contain 1, aa, bb, etc. However each cell is being drawn below the previous, so that row 1 contains '0', row 2 contains '1' and 'a' drawn over each other, and row 3 contains '2', 'aa', and 'b' and so on. I've temporarily put it up on my website http://www.nutanageophysics.com/IFP/test.html so everyone can see. (quick side question - what's best way to preserve live examples such as this?)

Here's my test html file

<!DOCTYPE html>
<html>
  <head>
    <title>Nutana Project Planner</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css"/>
    <script src="js/jquery-1.7.min.js"></script>
    <script src="js/jquery.event.drag-2.0.min.js"></script>
    <script src="js/slick.core.js"></script>
    <script src="js/slick.grid.js"></script>
    <script src="js/xyGrid.js"></script>

    <script type="text/javascript">

      var xyGrid;

      function initialize() {
        xyGrid = new Slick.Grid("#xyGrid", data, columns, options);
      }
    </script>
  </head>
  <body onload="initialize();">
    <div id=xyGrid >
        <!-- the grid is going to be placed here by onLoadXML -->
    </div>
</body>
</html>

My SlickGrid code is in xyGrid.js, included here:

  var data = [];
  var columns = [
    {id: "id", name: "id", field: "id"},
    {id: "x1", name: "X", field: "x1"},
    {id: "y1", name: "Y", field: "y1"},
  ];

   var options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
  };

  $(function () {
      var a='a';
      var b='b';
    for (var i = 0; i < 10; i++) {
      data[i] = {
        id:  i,
        x1: a,
        y1: b,
      };
      a +="a";
      b += "b";
    }

  })

The only other possible relevant thing is i've defined the style for xyGrid in css as

  #xyGrid {
   width: 280px;
   height: 500px;
  }

I've tried changing the width to no effect. All of the other relevant css is in the jquery.ui.css which I haven't touched. I've also unsuccessfully tried a bunch of different Grid options, but the two used here are those used in the example. I've also built a table around my div as in the example but they were using the table for other purposes and it isn't relevant.

Please help.

Thanks,

Marc Pelletier

podcastfan88 podcastfan88 · Accepted Answer · 2012-04-18T22:25:33

I believe you're missing the stylesheet: http://mleibman.github.com/SlickGrid/slick.grid.css

I re-created it locally and it looks okay with that included. Double-check you have all the sheets and scripts included in the original example.

(You can use jsfiddle.net for some sample code. Not sure if it could accommodate all this!)

javascript SlickGrid column width

1 Answers