title: Dynamic div height on load based on viewport height (Kendo UI)
body: <p>The following code block basically handles both load and resize event just fine in a normal setup but with the front-end framework we are using (Kendo UI), the targeted div height is not set property when page gets first loaded. </p>
  
  <pre><code>var resizeGrid = function() {
      var viewportHeight = $(window).height();
      var search = $("#something").outerHeight();
      $(".k-grid-content").height(viewportHeight - (400 - search));
  };
  $(window).resize(function() {
      resizeGrid();
  });
  
  $(document).ready(function () {
      $(window).trigger("resize");
  });
  </code></pre>
  
  <p>I have a demo here that replicates the same setup using Kendo UI.</p>
  
  <p><a href="http://jsbin.com/jatotojo/5/edit" rel="nofollow">JS BIN</a></p>
  
  <p>You will notice the grid height changes dynamically when the browser screen height
  changes but not when the page is first loaded. How should I go about this one?</p>