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 Grid呈現代表資料來源項的錶行（tr）。

有關可執行的示例，請參閱：

• Demo on using the row template of the Grid
• Demo on using the detail-row template of the Grid
• Demo on using the toolbar template of the Grid

每個表格行都包含代表Grid列的表格單元格（td）。 預設情況下，網格在列中顯示欄位的HTML編碼值。

下面的示例演示如何自定義列顯示其值的方式。

將列模板設定為字串

下面的示例演示如何將模板設定為字串並將列值包裝在HTML中。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

將列模板設定為函式

以下示例演示如何將模板設定為kendo.template返回的函式。

<div id="grid"></div>
<script id="name-template" type="text/x-kendo-template">
<strong>#: name #</strong>
</script>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

下面的示例演示如何將模板設定為返回字串的函式。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: function(dataItem) {
return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
}
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

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