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

Answer 1

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.