Web开发实用技能，看Kendo UI如何定义网格高度 _Kendo

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
Height默认情况下， Grid没有设置高度，并且会扩展来适合所有表格行。
入门指南
注意：仅在启用滚动时将高度设置为Grid 。
若要设置网格的高度，请使用以下任一方法：

将内联高度样式应用于从中初始化Grid的“div” 。
使用窗口小部件的height属性，该属性将内联样式应用于Grid wrApper—与上一个选项相同。
使用外部css ，例如使用ID或.k-grid CSS类应用高度样式。

设置网格的高度后，它将计算其可滚动数据区域的适当高度，以使标题行、过滤器行、数据、页脚和pager的综合等于小部件的预期高度。这就是为什么如果在创建窗口小部件后通过JAVAScript更改网格的高度，则必须随后调用resize方法。通过这种方式， Grid可以重新计算其数据区域的高度。
在特定情况下，您可以使用JavaScript或作为div.k-grid-content元素的外部CSS将高度样式设置为可滚动数据区域。在这种情况下，请避免为Grid设置高度。
图1：启用固定高度和滚动功能的网格

文章插图
【Web开发实用技能，看Kendo UI如何定义网格高度】
设定最小高度
注意：启用虚拟滚动时不适用。
您可以使Grid根据其行数并在一定范围内垂直扩展和收缩，为此请将最大和/或最大高度样式应用于可滚动数据区域，并且不要设置网格的任何高度。如果使用网格的MVC wrapper ，请删除默认的数据区域高度。除GridID ，您还可以使用.k-grid类来定位所有小部件实例。
#GridID .k-grid-content{min-height: 100px;max-height: 400px;}启用自动调整大小
注意：仅适用于可滚动网格。
1. 要允许Grid及其父级调整大小，请将高度为100％的样式应用于小部件的<div class =“ k-grid”> wrapper 。根据web标准，将百分比设置高度的元素要求明确设置其父代的高度。递归地应用此要求，直到达到像素高度的元素或html元素为止。高度为100％的元素不能具有边距、填充、边框或同级元素，这就是为什么您还必须删除网格的默认边框的原因。
2. 确保Grid内部布局适应“div”wrapper高度的变化，如果这些更改由调整浏览器窗口的大小触发的，请订阅浏览器的窗口调整大小事件并执行Grid的resize方法。调整大小方法将测量Grid “div”的高度，并调整可滚动数据区域的高度。

如果将Grid放置在Kendo UI Splitter或Kendo UI窗口中，则无需调用resize方法，因为这些小部件将自动执行它。另外，如果使用锁定列，则不必应用该方法。
如果可用于Grid的垂直空间取决于布局的自定义大小调整（由用户控制），请使用与布局更改有关的合适事件或方法来执行Grid的调整大小方法。在这种情况下，即使您使用锁定的列，也要调用resize方法。

在Kendo UI Q3 2013版本之后， resize方法适用于Kendo UI版本。对于早期版本不是调整大小，请使用以下方法，该方法实际上以相同的方式起作用。

$(window).resize(function() {var gridElement = $("#GridID"),newHeight = gridElement.innerHeight(),otherElements = gridElement.children().not(".k-grid-content"),otherElementsHeight = 0;otherElements.each(function(){otherElementsHeight += $(this).outerHeight();});gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);});

配置加载指示器
在内部， Grid使用kendo.ui.progress方法在远程读取请求期间显示加载叠加。如果禁用滚动，则覆盖图会显示在整个网格上。如果启用了滚动，则覆盖图将显示在可滚动数据区域上。如果启用了滚动并且Grid没有设置高度，则数据区域最初将具有零高度，这将使加载叠加层在第一个远程请求期间不可见。要可视化加载叠加层，请使用以下两种方法当中的一个：