Kendo UI for jQuery R1 2020 SP2試用版下載
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庫。
虛擬滾動是分頁的替代方法。
入門指南
啓用虛擬滾動後，當用戶垂直滾動時，網格將從其遠程數據源加載數據。
$("#grid").kendoGrid({
scrollable: {
virtual: true
},
// Other configuration.
});
在虛擬滾動中，HTML輸出與標準滾動功能不同——網格的數據表未放置在可滾動容器內。 滾動條屬於單獨的div.k滾動條，當數據行必須手動滾動到特定位置時，該滾動條會影響方案。
<div class="k-widget k-grid"> <div class="k-grid-header"> <div class="k-grid-header-wrap"> <table>...</table> </div> </div> <div class="k-grid-content"> <div class="k-virtual-scrollable-wrap"> <table>...</table> </div> <div class="k-scrollbar k-scrollbar-vertical"> ...<!-- div elements which generate a scrollbar -->... </div> </div> </div>
當用戶以其虛擬滾動模式滾動Grid時，Grid會動態顯示到達的滾動位置的錶行。 如果Gris使用本地數據，或者它的遠程數據已被加載和緩存，則小部件的呈現速度和性能取決於：
- 頁面大小
- 網格高度
- 滾動速度
- 數據項總數
如果項目總數很大並且滾動速度很快，則可以頻繁地重新渲染網格表。 另外，如果頁面大小很大，則用戶可能會發現滾動平滑的問題。 在這種情況下，請減小頁面大小並增加網格高度來提高滾動性能。
設置滾動條
虛擬滾動依賴於僞造的滾動條，它的大小不是由瀏覽器確定的，而是根據已經加載的數據平均行高來計算的。 如此一來行高度可變可能會導致意外的操作，例如無法滾動到最後一頁上的最後一行。 爲確保所有錶行都具有相同的高度，請使用以下任一選項：
- 禁用自動換行
- 設置一個明確的、足夠大的行高，如以下示例所示。
.k-virtual-scrollable-wrap tr
{
height: 3em;
}
// Or
.k-virtual-scrollable-wrap td
{
white-space: nowrap;
}
在手機上使用
在看不到可以抓取和拖動滾動條的移動設備上，大量數據項（例如數千個）的虛擬滾動可能會妨礙對所有錶行的輕鬆訪問，因爲大量數據項將需要大量的數據。另一方面，對數量很少（例如少於200個）的項目使用虛擬滾動沒有多大意義。 觸摸設備上的虛擬滾動依賴於拖放事件，該事件比本地滾動要慢。 這可能會導致性能問題。
已知侷限性
注意：當不支持或不建議使用虛擬滾動時，取決於數據項的數量，請恢復爲標準分頁，或者恢復爲不進行分頁的非虛擬滾動。
- 啓用虛擬滾動或分頁， 不要同時應用兩個功能。
- 虛擬滾動與分組和層次結構不兼容，從R3 2017開始支持編輯。
- 虛擬滾動依賴於根據已加載的數據計算平均行高，行高變化很大或未綁定到數據的行數未知（例如組標題）可能會導致意外操作。
- 提供足夠大的網格頁面大小，以便錶行不適合可滾動數據區域。 否則，將不會創建垂直虛擬滾動條，網格的頁面大小必須大於數據區域中可見錶行數的三倍以上。
- 初始化時需要顯示具有設置高度的可滾動Grid。 通過這種方式，網格可以根據小部件的總高度來調整其可滾動數據區域的高度。 在某些情況下，初始化時Grid可能是不可見的——例如，放置在最初不激活的TabStrip標籤或另一個小部件中時，在這種情況下請使用以下任一選項：
- 在其元素仍然可見的情況下初始化Grid。
- 在父窗口小部件的適當事件中初始化網格——例如，在TabStrip的Activate事件中。
- 由於與高度相關的瀏覽器限制（無法避免），虛擬滾動最多可以處理一百萬個記錄，確切的記錄數取決於瀏覽器和行高。 如果您使用的行數大於瀏覽器無法處理的行數，則可能會發生意外的窗口小部件操作或JavaScript錯誤。 在這種情況下，請還原爲標準分頁。
- 在虛擬模式下刷新或替換Grid數據時，必須將虛擬滾動條的位置重置爲零，例如，使用$('#GridID .k-scrollbar').scrollTop(0);。在某些情況下，您可能還需要調用refresh（）方法。
- 啓用虛擬滾動時，不支持以編程方式滾動到特定的Grid行，因爲無法可靠地預測該行的確切滾動偏移量。
- 當網格可導航時，鍵盤導航僅支持向上箭頭鍵和向下箭頭鍵，不支持Page Up和Page Down鍵滾動。
- 通過使用以下示例，新的persistSelection可以與單選功能一起使用。不建議使用多重選擇功能，因爲發生滾動時會從DOM中刪除舊頁面。 這可能會破壞選擇，因爲滾動到達新頁面後DOM元素不存在。