Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

 

自適應(yīng)渲染

Kendo UI for jQuery通過支持自適應(yīng)增強功能，可在任何設(shè)備上為客戶提供一致的體驗。

例如，當(dāng)您在移動設(shè)備上過濾或編輯數(shù)據(jù)時，Kendo UI會在用戶的新屏幕中滑動，這與臺式機的內(nèi)聯(lián)和彈出操作有所不同。

 

啟用響應(yīng)式設(shè)計

要啟用自適應(yīng)渲染功能，請將mobile屬性設(shè)置為true或“ phone”：

• 如果設(shè)置為true，則在移動瀏覽器上查看時，小部件將使用自適應(yīng)渲染。

• 如果設(shè)置為“      phone”，則無論瀏覽器類型如何，都將強制小部件使用自適應(yīng)渲染。

 

重要提示：對于移動渲染，我們建議也設(shè)置高度選項。 如果不設(shè)置明確的高度，則網(wǎng)格的每個視圖都可能具有不同的高度。

在移動設(shè)備上配置面板

放置自適應(yīng)網(wǎng)格的移動面板不會自動擴展其高度，要將自適應(yīng)網(wǎng)格添加到Kendo UI移動應(yīng)用程序中，請將各個視圖的拉伸配置設(shè)置為true，然后將100％的高度應(yīng)用于網(wǎng)格。或者定義一個明確的像素網(wǎng)格高度，并省略面板拉伸選項。

 

重要提示：在Kendo移動應(yīng)用程序中使用網(wǎng)格的自適應(yīng)渲染時，請應(yīng)用我們Less-based的主題。

下面的示例演示如何應(yīng)用Stretch選項。

 

 

 

下面的示例演示如何應(yīng)用height選項。

 

 

 

調(diào)整列大小

當(dāng)用戶將手指放在相應(yīng)的列標(biāo)題上時，將觸發(fā)觸摸屏設(shè)備上的列大小調(diào)整功能。 當(dāng)出現(xiàn)調(diào)整大小圖標(biāo)時，用戶可以通過拖動來調(diào)整列的大小。

圖1：在移動設(shè)備上具有可調(diào)整大小的列的網(wǎng)格

 

破壞自適應(yīng)網(wǎng)格

在自適應(yīng)模式下，網(wǎng)格將生成輔助標(biāo)記，如果要手動銷毀小部件，則需要將其刪除。

手動銷毀網(wǎng)格：

• 在圍繞Grid小部件創(chuàng)建的最近的.k-pane-wrapper ancestor上調(diào)用kendo.destroy() ；

• 從DOM中刪除整個.k-pane-wrapper元素。

• 要重新創(chuàng)建Grid，請在最初放置Grid div的同一位置插入一個新的div。