Web界面開發工具Kendo UI是怎樣自適應渲染

Web界面開發工具Kendo 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。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。