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。

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