Kendo UI for jQuery R2 2020 SP1試用版下載

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元素

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！