Setting Kendo UI grid height 100% of wrapper

Question

I know there is an easy way to set fixed height of a Kendo UI grid through their API but for our specific needs, I need to make the grid expand in full height of its wrapper.

With the following markup structure, I set .wrapper to height:600px and I tried to give .k-grid-content height:100% but it doesn't expand. #grid expands to 100% with height:100% but I need the inside contents to expand as well. How do I achieve that?

Here is the demo JS BIN

<div class="wrapper">
    <div id="grid">
        <div class="k-grid-header"></div>
        <div class="k-grid-content"></div>
        <div class="k-grid-pager"></div>
    </div>
</div>

Answer 1

According to one of Kendo's tech support team; Dimo Dimov. You should set the height of one container, and everything inside should be set to 100% (including the grid). Then you manually adjust the content height on document ready and window resize.

See here for his example:

http://jsfiddle.net/dimodi/SDFsz/

See here for yours updated with a js function to set the height of the wrapper to the window height.

http://jsbin.com/yumexugo/1/edit

Essentially the content is resized with:

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

and the wrapper is sized with (you may need to modify this to suit your layout):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

Document ready and window resize both call:

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

Relevant css:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

Answer 2

You have to do two things.

1. Adjust the $('.k-grid table') height on page resize
2. Adjust the $('.k-grid table') height on dataBound method of grid

Please see it in jsBin http://jsbin.com/xorawuya/1/edit

  $(window).resize(function() {
    var viewportHeight = $(window).height();
    $('#outerWrapper').height(viewportHeight);
    $('.k-grid table').height(viewportHeight-150);
  });

And also here

  dataBound: function(e) {
    $('.k-grid table').height($(window).height()-150);
  },

The 150 which I am subtracting is the height of window minus height of the grid header/footer. This could be different in your website layout. Adjust it accordingly.

Answer 3

I created another solution that works when your html is different in the sense that its not just the grid alone but other content above it. The JSFiddle is located here.

HTML

<div class="container">
  <div class="test">
    hey there
  </div>
  <div id="grid"></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  height:100%;
}
.test{
  height:100px;
}
html {
  overflow: hidden;
}

JS

function resizeGrid() {
  var gridElement = $("#grid");
  var dataArea = gridElement.find(".k-grid-content");
  var newHeight = gridElement.parent().innerHeight() - 2 -calcHeightsOfParentChildren(gridElement);
  var diff = gridElement.innerHeight() - dataArea.innerHeight();
  if((newHeight-diff)>0){
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
  }
}

function calcHeightsOfParentChildren(element){
    var children = $(element).parent().children();
  var height = 0;
  $.each(children, function( index, value ) {
    if($(value).attr("id") != $(element).attr("id")){
        height = height + $(value).height();
    }
    });
    return height;
}

$(window).resize(function() {
  resizeGrid();
});

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  filterable: true,
  sortable: true,
  pageable: true,
  dataBound: resizeGrid,
  columns: [{
      field: "OrderID",
      filterable: false
    },
    "ShipName",
    "ShipCity"
  ]
});

The key in my solution is the modified resizeGrid function. What happens without this modification is if the user scrolls far enough upwards the bottom pager gets lost! By checking to make sure the newHeight-diff is greater than 0 it prevents this error.

Second calcHeightsOfParentChildren when passed the element of the grid in question will calculate all the other heights except its own to help calculate the correct difference to place the pager control and grid so that it truly takes up 100% and retains its 100% ratio.

Answer 4

If you don't mind people with IE8 this is the way to go:

/* FULL HEIGHT GRID */
.k-grid.k-grid-stretch-height-full {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-full .k-grid-content {
    height: calc(100% - 103px) !important;
}
.k-grid.k-grid-stretch-height-nogroup {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-nogroup .k-grid-content {
    height: calc(100% - 72px) !important;
}
.k-grid.k-grid-stretch-height-simple {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-simple .k-grid-content {
    height: calc(100% - 37px) !important;
}

Just add any of the k-grid-stretch-height-AXZ classes along side k-grid and play with pixel numbers.