加载时基于视口高度的动态 div 高度（Kendo UI）

Question

以下代码块在正常设置中基本上可以很好地处理加载和调整大小事件，但是在我们使用的前端框架（Kendo UI）中，第一次加载页面时没有设置目标 div 高度属性。

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

我在这里有一个演示，它使用 Kendo UI 复制了相同的设置。

JS BIN

当浏览器屏幕高度时，您会注意到网格高度会动态变化 更改，但在第一次加载页面时不会更改。我该怎么办？

Answer 1

这是因为 kendoGrid ajax 请求在页面加载后完成。您需要将此添加到 kendoGrid dataBound 方法中，以便在加载内容后调整网格大小。

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

见jsBinhttp://jsbin.com/jatotojo/8/edit