目標は、外部テンプレートを Kendo UI グリッドのツールバーにロードすることです。ビュー自体にスクリプトを直接含めないことをお勧めします (Kendo サイトの例に見られるように)。私は $.get をいじっていますが、完全には成功していません。テンプレートを下のツールバーに割り当てる最良の方法は何ですか?
剣道バージョン 2012.3.1114、Visual Studio 2012
グリッド設定を設定するスクリプトでの関数呼び出し:
var configureGrid = function() {
var grid = $('#allItemsGrid').kendoGrid({
dataSource: {
type: 'json',
transport: {
read: {
url: "api/GridApi/GetAll",
dataType: 'json',
type: 'GET',
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
fields { {
MusicItemId: { type: "integer" },
Artist: { type: "string" },
Title: { type: "string" },
Genre: { type: "string" },
Format: { type: "string" },
Notes: { type: "string" },
Country: { type: "string" }
}
}
},
pageSize: 5
},
toolbar: // load external template????
sortable: true,
pageable: { pageSizes: [5, 10, 15] },
columns: gridCols.GridColumns
});
これは、MVC プロジェクトのルートからすぐの Tmpl フォルダーにあるテンプレートです。
<script type="text/x-kendo-template" id="tmplTarget">
<div class="toolbar">
<label class="category-label" for="category">Show By Genre:</label>
<input type="search" id="category"></input>
</div>
<div class="toolbar">
<label class="category-label" for="category">Show By Format:</label>
<input type="search" id="category2"></input>
</div>
<a class="k-button" id="searchCriteria" href="\\\#" onclick="test_fn()">Search</a>
</script>
ライアンのリクエストによる。以下のこのコードは、剣道のドキュメントに基づいて機能するかどうかを確認するために作り直したものです。コード：
<!DOCTYPE html/>
<html>
<head>
<title>The Grid</title>
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/kendo.web.min.js"></script>
<script src="~/Scripts/templateLoader.js"></script>
<link href="~/Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
</head>
<script type="text/javascript">
templateLoader.loadExtTemplate("@Url.Content("~/Tmpl/Test.tmpl.html")");
$(document).ready(function () {
var _itemTemplate;
$(document).bind("TEMPLATE_LOADED", function (e, path) {
console.log('Templates loaded');
_itemTemplate = kendo.template($('#template').html(), { useWithBlock: false });
});
$('#allItemsGrid').kendoGrid({
dataSource: {
type: 'json',
transport: {
read: {
url: "", // left blank, not concerned with pulling data back for now
dataType: 'json',
type: 'GET',
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
fields: {
MusicItemId: { type: "integer" },
Artist: { type: "string" },
Title: { type: "string" },
Genre: { type: "string" },
Format: { type: "string" },
Notes: { type: "string" },
Country: { type: "string" }
}
}
},
pageSize: 5
},
toolbar: [{ name: 'customTemplate', template: _itemTemplate }],
sortable: true,
pageable: { pageSizes: [5, 10, 15] }, // page size using pager
columns: [
{ field: "Artist", title: "Aritst" },
{ field: "Title", title: "Title" },
{ field: "Genre", title: "Genre" },
{ field: "Format", title: "Format" },
{ field: "Notes", title: "Notes" },
{ field: "Country", title: "Country" }
]
});
});
</script>
<style scoped="scoped">
#grid .k-toolbar {
min-height: 27px;
}
.category-label {
vertical-align: middle;
padding-right: .5em;
float: left;
}
#category {
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
<body>
<div id="allContainer">
<div id="allItemsGrid"></div>
</div>
</body>
</html>
これが templateLoader.js ファイルです。
var templateLoader = (function($, host) {
return {
loadExtTemplate: function(path) {
var tmplLoader = $.get(path)
.success(function(result) {
$('body').append(result);
})
.error(function(result) {
alert("Error loading template...");
});
tmplLoader.complete(function() {
$(host).trigger("TEMPLATE_LOADED", [path]);
});
}
};
})(jQuery, document);
型紙は上に書いたものと同じです。ドキュメントの本文に結果を追加しているため、明らかにこれは機能しません。必要なのは、グリッド ツールバーのテンプレートに追加された結果です。ネットワーク トラフィックを監視して確認したとおり、テンプレートのプルダウンに成功しています。