剣道UI for jQuery R2 2020 SP1体験版ダウンロード
剣道UIは、現在提供：4つのコントロールjQueryのための剣道UI、角度のための剣道UI、剣道UIサポートリアクトためとVueのための剣道UIサポート。Kendo UI for jQueryは、最新のWebアプリケーションを作成するための最も完全なUIライブラリです。
グループテンプレート
グループ化を適用すると、グリッドのグループ化行がデータ行をツリー構造に編成します。
実際の例については、以下を参照してください。
グループ行には、グループサマリー値が表示され、ユーザーがグループ行を展開（サブ行を表示）および折りたたむ（サブ行を非表示）ことができるグループの展開アイコンと折りたたみアイコンが含まれます。グリッドには、グループ行の外観をカスタマイズするために使用できる次のテンプレートが用意されています。
- GroupHeaderTemplate- グループ行全体のテンプレートをレンダリングします。通常、主な目的はグループ全体に関する情報を表示することです。デフォルトでは、テンプレートを定義しない場合、フィールド名と現在のグループ値が表示されます。
- GroupHeaderColumnTemplate- 行自体に揃えられたグループ行にテンプレートをレンダリングします。通常、現在のグループのコンテキストで特定の列の合計値を表示し、テンプレートのコンテンツは列自体に合わせて視覚的に表示されます。
- GroupFooterTemplate- グループフッター行のgroupHeaderColumnTemplateと同様に、この列に揃えられたグループフッター行にテンプレートをレンダリングします。
テンプレートが定義されていない場合、フィールド名と現在のグループは次のように表示されます。
図1：グループテンプレートのないグリッド
GroupHeaderTemplateを使用する唯一の違いは、フィールドの値と現在のグループではなく、テンプレートのコンテンツがコンパイルされて表示されることです。GroupHeaderColumnTemplateとGroupFooterTemplateは同様に機能します。
GroupHeaderColumnTemplateは、グループ行の列に揃えてコンテンツを表示します。GroupFooterTemplateは、グループフッター行の列に揃えてコンテンツを表示します。以下に示すように、それらのコンテンツは列に揃えて表示されます。
図2：定義されたヘッダーテンプレートとフットテンプレートがあるグリッド
GroupHeaderTemplateはグループ行の展開アイコンの横に表示されるため、最初に表示される列のGroupHeaderColumnTemplateよりも優先されます。グリッドの最初の列のGroupHeaderColumnTemplateのコンテンツを表示するには、グループ列にGroupHeaderTemplateを設定しないでください。以下のグリッド構成は、在庫在庫列のGroupHeaderTemplateに注釈を付けることを示しており、製品名列のGroupHeaderColumnTemplateが表示されます。
<div id = "grid"> </ div>
<script>
$（ "＃grid"）。kendoGrid（{
dataSource：{
type： "odata"、
transport：{
read： "https://demos.telerik.com /kendo-ui/service/Northwind.svc/Products "
}、
pageSize：7、
group：{
field：" UnitsInStock "、aggregates：[
{field：" ProductName "、aggregate：" count "}、
{field：" UnitsInStock "、aggregate：" min "}
]
}、
aggregate：[{フィールド：" ProductName "、aggregate：" count "}、
{フィールド：" UnitsInStock "、aggregate：" min "}]
}、
列：[
{フィールド： 「ProductName」、タイトル："製品名"、
集計：["カウント"]、
groupHeaderColumnTemplate： "カウント：＃= count＃"、幅：300
}、
{フィールド： "UnitPrice"、タイトル： "Unit Price"}、
{フィールド： "UnitsOnOrder"、タイトル： "Units On Order"}、
{フィールド： "UnitsInStock"、タイトル： "Units In Stock"、集計： ["min"]、
// groupHeaderTemplate： "Min：＃= min＃"、width：500
}
]
}）;
</ script>
Kendo UIの最新ニュースについては、Telerik ChineseのWebサイトをご覧ください。