slickgrid: simple grid render error

Question

I'm trying to use slickgrid to render a very simple table and the result is unexpected. Here is the code:

<script> 

    var grid;

    var columns = [
        {id:"id", name:"ID", field:"id"},
        {id:"a", name:"A", field:"a"},
        {id:"b", name:"B", field:"b"}
    ];

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

    $(function() {
            var data = [];
            data[0] = {
                id: "1",
                a: "1",
                b: "1" };
            data[1] = {
                id: "2",
                a: "2",
                b: "2" };

               grid = new Slick.Grid("#myGrid", data, columns, options);
               $("#myGrid").show(); 

        });

    </script>

Instead of displaying:

| ID | A | B |
| 1  | 1 | 1 |
| 2  | 2 | 2 |

I got

| ID | A | B |
| 1  | 1 |
| 2  | 2 |
| 2 |

Could somebody tell me how this could happen?

Thanks

Seems you have a conflic in html or css design. I had a similar problem and I fixed it in #myGrid div. Please try to set style:width more big than you think need. — Alberto León

njr101 njr101 · Accepted Answer · 2011-08-26T15:01:30

Copied your code and the grid displays correctly for me. Maybe you should check your jQuery and SlickGrid versions?

Here's the HTML I am using.

  <table width="100%">
    <tr>
      <td valign="top" width="50%">
        <div id="myGrid" style="width: 600px; height: 500px;">
        </div>
      </td>
      <td valign="top">
        <h2>
          Demonstrates:</h2>
        <ul>
          <li>SlickGrid</li>
        </ul>
      </td>
    </tr>
  </table>

slickgrid: simple grid render error

1 Answers