Kendo UI for jQuery數據管理使用教程：自適應渲染

---

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庫。

自適應渲染

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

例如，當您在移動設備上過濾或編輯數據時，Kendo UI會在用戶的新屏幕中滑動，這與臺式機的內聯和彈出操作有所不同。

啟用響應式設計

要啟用自適應渲染功能，請將mobile屬性設置為true或“ phone”：

• 如果設置為true，則在移動瀏覽器上查看時，小部件將使用自適應渲染。
• 如果設置為“ phone”，則無論瀏覽器類型如何，都將強制小部件使用自適應渲染。

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

<div id="grid"></div>

<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
editable: true,
columnMenu: true,
height: 550,
mobile: "phone"
});
</script>

在移動設備上配置面板

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

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

下面的示例演示如何應用Stretch選項。

<div id="foo" data-role="view" data-init="onInit" data-stretch="true">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "100%"
};

function onInit() {
$("#grid").kendoGrid(gridConfig);
}

var app = new kendo.mobile.Application();
</script>

下面的示例演示如何應用height選項。

<div id="foo" data-role="view" data-init="onInit">
<div id="grid"></div>
</div>

<script>
var gridConfig = {
columns: [
{ field: "name" },
{ field: "age" },
{ command: "destroy" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
filterable: true,
columnMenu: true,
mobile: "phone",
height: "140px" //grid will be 140px height
};

$("#grid").kendoGrid(gridConfig);
</script>

調整列大小

當用戶將手指放在相應的列標題上時，將觸發觸摸屏設備上的列大小調整功能。 當出現調整大小圖標時，用戶可以通過拖動來調整列的大小。

圖1：在移動設備上具有可調整大小的列的網格

破壞自適應網格

在自適應模式下，網格將生成輔助標記，如果要手動銷毀小部件，則需要將其刪除。

手動銷毀網格：

1. 在圍繞Grid小部件創建的最近的.k-pane-wrapper ancestor上調用kendo.destroy() ；
2. 從DOM中刪除整個.k-pane-wrapper元素。

要重新創建Grid，請在最初放置Grid div的同一位置插入一個新的div。

---