CODEWITHSUNDEEP
javascriptjquerykendo-ui
Seong Lee
Seong Lee

Reputation: 10520

Dynamic div height on load based on viewport height (Kendo UI)

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. 

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");
});

I have a demo here that replicates the same setup using Kendo UI.

JS BIN

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?

Upvotes: 0

Views: 1356

Answers (1)

SajithNair
SajithNair

Reputation: 3867

This is because the kendoGrid ajax request completes after the page load. You need to add this to the kendoGrid dataBound method, so that it resizes the grid after the content is loaded.

dataBound: function(e) {
  resizeGrid();
},

See jsBin http://jsbin.com/jatotojo/8/edit

Upvotes: 1

Related Questions