SlickGrid 100% height of parent?

Question

I'm trying to use SlickGrid with jQuery Layout UI, and I want SlickGrid to occupy 100% height of it's parent pane.

Issue is, when SlickGrid is instantiated, it has no rows (part of my ajax interface loads in the data later, not on page load), so the height is set by default to something like 1px (plus the height of the headers). When I load in the data later, I can't see any of the rows.

I've tried setting the SlickGrid DOM element to height: 100%;, but that does nothing. How can I force the SlickGrid canvas to take up 100% height of the pane it lives in, even if it has fewer rows of data?

Answer 1

I ended up working around this using a combination of jQuery PubSub, UI Layout's accessor methods, and SlickGrid's resizeCanvas() method. It seems to work pretty well.

Note: My project was already using pubsub, and I load in my modules using RequireJS.

So, in my grid module file, I subscribe a method to receive the new innerHeight of the pane it lives in, which saves it to a local variable, then calls my resize(); function:

$.subscribe("units/set_grid_height", function (new_height) {
  grid_opts.height = new_height;
  resize();
});

// ...

// grid = the jQuery element that represents the SlickGrid
// slick = the instantiated slickgrid
function resize() {
  grid.css('height', grid_opts.height);
  slick.resizeCanvas();
}

Then, in my init js file (where the layout is defined), I set up the correct publishing for the initial state and each time the center pane changes:

layout = $('body').layout({
  center: { 
    onresize: function (name, el, state, opts, layout_name) { 
      $.publish("units/set_grid_height", [state.innerHeight]);
    }
  }
});

$.publish("units/set_grid_height", [layout.state.center.innerHeight]);

That seems to do exactly what I want. I know it's not a general solution, but it doesn't look like SlickGrid can do all of this on it's own.