SlickGrid 100% height of parent?

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?

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.

For those like me who got a similar error but different circumstances :

From the wiki - "The explicit width and height on the slickgrid container are required in the markup, otherwise the grid body is not visible (height:1px) and the grid gets the width of the grid header (width:100000px)."

So don't forget to give the main grid div a width & a height !

ps: Don't think it applies to this question here but this was the only question which popped up on searching "slick grid 1px bug" :-/

I'm going to give an answer that even I don't like, but my javascript skills are limited and this is a solution I'm using until I find something better.

Basically, I take the document height and subtract the height of any other elements outside of the slickgrid, like this:

  $("#id-of-slickgrid-container").height(
      $(document).height() -
      $("#header").outerHeight() -
      $("#nav").outerHeight() -
      $("#footer").outerHeight() - 44
  );

The "44" is a fudged number that comes close enough to the height of extra space used inside the slickgrid, etc.

I hope this answer is still usefull, I came across it in another answer: https://stackoverflow.com/a/10878955/4606828

In Slickgrid options add autoHeight:

options = {
       ...
       autoHeight: true
       };

The Slickgrid will always grow with it's content and you can set the parent's height to whatever.

I took Van's answer and adjusted it as follows. There are still magic numbers, but at least you do not have to know about the specific containers.

HTML:

<div id="myGridSizer"></div>
<div id="myGrid"></div>

CSS:

#myGrid {
    width: 100%;
}

#myGridSizer {
    top: 73px;
    bottom: 73px;
    width: 0;
    position: absolute;
}

JavaScript:

$("#myGrid").height($('#myGridSizer').outerHeight());
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options);