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：啟用固定高度和滾動功能的網格
設定最小高度
注意：啟用虛擬滾動時不適用。
您可以使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沒有設置高度，則數據區域最初將具有零高度，這將使加載疊加層在第一個遠程請求期間不可見。 要可視化加載疊加層，請使用以下兩種方法當中的一個：
- 設置網格的高度
- 將最小高度樣式應用于div.k-grid-content元素
