SlickGrid rows are not shown

Question

I got a trouble using a simple SlickGrid: it can't show up data rows, but makes a space for them. Here is my code:

var defaultFormatter = function (row, cell, value, columnDef, dataContext) {
        return value;
    }
var subgrid = $("#subgrid");
    var dt = new Slick.Data.DataView();
    var its = [
        { Id: "1", name: "First row", time: "15:13" }
    ];
    dt.setItems(its, "Id");
    var opts = {
        enableCellNavigation: true,
        enableColumnReorder: false
    };
var columns = [
        {
            width: 0,
            name: "Row name",
            field: "name",
            id: "name"
        },
        {
            width: 0,
            name: "Time",
            field: "time",
            id: "time"
        }
    ];
    for (var i in columns) {
        if (columns[i].width == 0)
            columns[i].width = "auto";
        columns[i].formatter = defaultFormatter;
    }


    var ogrid = new Slick.Grid("#subgrid", dt, columns, opts);
    ogrid.invalidate();
    ogrid.render();

Html code is simple:

<div id="subgrid" class="grid-place-holder"></div>

So, each time the page is loading, SlickGrid builds only a header row and grid-canvas, but there is no data in .grid-canvas. I tried different combinations, like "ogrid.invalidateAllRows()" for example, but none makes it work. Please, give me a clue, where am I wrong?

Upd: Okay, I get it. SlickGrid renders dynamically and I didn't set the height of "#subgrid". So in case of "height: auto" (height = 0 for slickgrid) it could render no rows. Always set the height style in slickgrid root element.

If you found a solution, please add it as an answer to your question. — Ilya Luzyanin

Baseleus Baseleus · Accepted Answer · 2014-09-08T08:46:18

SlickGrid renders dynamically and I didn't set the height of "#subgrid". So in case of "height: auto" (height = 0 for slickgrid) it could render no rows. Always set the height style in slickgrid root element.

SlickGrid rows are not shown

1 Answers