このトピックでは、jQuery と MVC 両方の igHierarchicalGrid™ の初期化方法を示しています。
このトピックは、以下のセクションで構成されます。
以下に示すのは、初期化で一般的に使用される主な igHierarchicalGrid プロパティです。これらのプロパティはフラット igGrid のプロパティと同じです。
key
- 列レイアウトの IDdataSource
- igHierarchicalGrid のデータ取得元となるデータ ソースinitialDataBindDepth
- igHierarchicalGrid が最初にデータ ソースをバインドする階層のレベルresponseDataKey
- 行要素のコレクションを保持するオブジェクト。primaryKey
- 子レイアウトのプライマリ キーforeignKey
- 子レイアウトの外部キーこれらのプロパティは、次に示すプロシージャ例で使用されています。
以下は最終結果のプレビューです。
jQuery の要件
HTML の場合:
<table id="hierarchicalGrid">
</table>
MVC 固有の要件
Ignite UI for MVC が jQuery ウィジェットを再描画するため、jQuery と MVC 両方のサンプルに必要なスクリプトは同じです。次が必要になります。
グリッドとそのグループ化機能を実行するためには以下のスクリプトが必要とされます。
次のコード サンプルは、HTML ファイルのヘッダー コードに追加されるスクリプトです。
HTML の場合:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script><script type="text/javascript" src="infragistics.lob.js"></script>
このサンプルでは以下が使用されています。
jQuery – Northwind データベース
MVC - Adventure Works データベース。
以下のサンプルでは、igHierarchicalGrid コントロールを JSON データ ソースにバインドする方法を紹介します。
MVC Controller メソッドを作成します。
MVC Controller メソッドを作成し、SQL Model からデータを取得して、View を呼び出します
MVC の場合:
public ActionResult Default()
{
var ctx = new AdventureWorksDataContext("ConnString");
var ds = ctx.Products;
return View("Events", ds);
}
igHierarchicalGrid を定義します。
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid1")
.LoadOnDemand(false)
.AutoGenerateColumns(true)
.PrimaryKey("ProductID")
.AutoGenerateLayouts(false)
.ColumnLayouts(layouts => {
layouts.For(x => x.ProductInventories)
.PrimaryKey("LocationID")
.ForeignKey("ProductID")
.AutoGenerateColumns(false)
.Columns(childcols1 =>
{
childcols1.For(x => x.ProductID);
childcols1.For(x => x.LocationID);
childcols1.For(x => x.Shelf);
childcols1.For(x => x.Bin);
childcols1.For(x => x.Quantity);
});
})
.Width("750px")
.DataBind()
.Render()%>
プロジェクトを保存します。
結果を検証するために、アプリケーションを実行します。上記のプレビューで示すように、igHierarchicalGrid が確認できるはずです。
以下は、その他の役立つトピックです。
オンラインで表示: GitHub