このトピックでは、igHierarchicalGrid
™ コントロールを構成して DataSet にバインドする方法を紹介します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igHierarchicalGrid
を Web ページに追加する方法を説明します。igGrid
コントロールを DataTable
データ ソースにバインドする方法を紹介します。igHierarchicalGrid
に読み込む方法を 2 通り紹介します。バージョン 12.2 以降、igHierarchicalGrid
は DataSet
とのデータ バインディングをサポートします。バージョン 12.1 まで、DataSource
プロパティは IQueryable
のインスタンスのみを受け付けていました。
GridModel
では新しいプロパティ DataMember
を導入しました。このプロパティを設定すると、グリッドは、DataSet
から取得した DataMember
値と一致する DataTable
の名前を検索して、それにグリッドをバインドします。AutoGenerateLayouts
が false で、レイアウトを手動定義するとき、このプロパティが便利です。AutoGenerateLayouts
と true に設定すると、この設定は無視されます。
C# の場合:
GridModel model = new GridModel();
DataSet ds = GetEmployDepartmentDataSet();
model.DataSource = ds;
model.AutoGenerateColumns = true;
model.AutoGenerateLayouts = false;
model.DataBind();
// Setting as DataMember of the root grid the name of Departments DataTable
model.ColumnLayouts[0].DataMember = "Departments";
// Setting as DataMember of the child grid the name of Employees DataTable
model.ColumnLayouts[0].ColumnLayouts[0].DataMember = "Employees";
ボリューム 12.2 では、さらに AutoGenerateLayouts
がデフォルトで false
になるように変更しました。
DataSet
とのバインディングは、以下の方法のどれかで実行します。
このシナリオでは、モデル タイプは DataSet
ですが、これは dynamic タイプにも設定できます。
ASPX の場合:
<%=(Html.Infragistics().Grid<System.Data.DataSet>().ID("grid1").Height("500px")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.RenderCheckboxes(true)
.AutoCommit(false)
.Features(features => {
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single);
features.Paging().PageSize(5).Type(OpType.Remote);
features.Updating();
features.Filtering().Type(OpType.Local);
features.GroupBy().Type(OpType.Local);
features.Hiding();
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.RowSelectors();
features.Resizing();
features.Tooltips().Visibility(TooltipsVisibility.Always);
})
.GenerateCompactJSONResponse(false)
.DataSource(Model)
.DataSourceUrl(Url.Action("dataset-interactions"))
.UpdateUrl(Url.Action("EditingSaveChanges"))
.DataBind()
.Width("100%")
.Height("100%")
.Render()) %>
C# の場合:
[GridDataSourceAction]
[ActionName("dataset-interactions")]
public ActionResult DataSetInteractions()
{
DataSet ds = this.DepartmentsData;
return View("DataSetInteractions", ds);
}
ASPX の場合:
@model Infragistics.Web.Mvc.GridModel
@(Html.Infragistics().Grid(Model))
C# の場合:
GridModel model = new GridModel();
DataSet ds = GetEmployDepartmentDataSet();
model.DataSource = ds;
model.AutoGenerateColumns = true;
model.AutoGenerateLayouts = true;
// defining the grid
return View("BindToDataSet", model);
igHierarchicalGrid
を DataSet
にバインドするとき、LoadOnDemand
をサポートします。
LoadOnDemand
を igHierarchicalGrid
に使用するとき、DataSource
と DataSourceUrl
の両方を設定してください。
C# の場合:
GridModel grid = GridLoadOnDemandModel();
grid.DataSource = GetEmployDepartmentDataSet();
grid.DataSourceUrl = this.Url.Action("NewBindParent");
grid.ColumnLayouts[0].DataSourceUrl = this.Url.Action("NewBindChild");
return View("NewLoadOnDemand", grid);
public JsonResult NewBindChild(string path, string layout)
{
GridModel model = GridLoadOnDemandModel();
model.DataSource = GetEmployDepartmentDataSet();
model.DataMember = "Employees";
return model.GetData(path, layout);
}
DataMember
を設定せず、AutoGenerateLayouts
の設定を false で DataSet にバインドすると、igHierarchicalGrid
は DataSet テーブル コレクションの最初のテーブルにだけバインドされます。
このグリッドは テーブル間で DataRelations を使用して、階層を構築します。
つまり、反復はテーブル コレクションそのものではなく、DataTables の DataRelations で行います。
フィルタリング、並べ替え、グループ化の各機能が内部で使用する LINQ 式は、DataTable
や DataSet
では使用できません。
GroupBy の Type が Local に設定しても ColumnSettings オプションによって初期化でグループ化された列を設定することはサポートされていません。GridModel は、クライアントに送信する前にデータを並べ替えます。
リモート並べ替えとフィルタリングは、要求を手動処理し、DataSet
のデータを処理し、 JsonResult
として戻すことで実装します。
さらに、グリッドのデータ ソースとして DataSet
を使用するとき、集計機能はサポートしていません。
ASPX の場合:
<%=(Html.Infragistics().Grid<System.Data.DataSet>().ID("grid1").Height("500px")
.AutoGenerateColumns(true)
.RenderCheckboxes(true)
.AutoCommit(false)
.Features(features => {
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single);
features.Filtering().Type(OpType.Local);
features.GroupBy().Type(OpType.Local);
features.Paging().PageSize(5).Type(OpType.Remote);
features.Updating();
features.Hiding();
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.RowSelectors();
features.Resizing();
features.Tooltips().Visibility(TooltipsVisibility.Always);
})
.GenerateCompactJSONResponse(false)
.DataSource(Model)
.DataSourceUrl(Url.Action("datatable-interactions"))
.UpdateUrl(Url.Action("EditingSaveChanges"))
.DataBind()
.Width("100%")
.Height("100%")
.Render()) %>
C# の場合:
GridFiltering filtering = new GridFiltering();
filtering.Type = OpType.Local;
model.Features.Add(filtering);
以下の機能はグリッドではリモートで動作します。
LoadTransactions
メソッドで機能するように変更してください。Microsoft JSON シリアライザーはJSON からのディクショナリのシリアル化解除はサポートしていません。更新機能を使用するとき、GridModel
で、LoadTransactions
メソッドをオーバーライドしてください。これには、Json.NET シリアライザーで対応できます。このシリアライザーは以下のページでダウンロードできます。また ASP.NET MVC 4 にはデフォルトの JSON シリアライザーとして組み込まれています。
http://james.newtonking.com/projects/json-net.aspx
C# の場合:
public List<Transaction<T>> LoadTransactionsDictionary<T>(string postdata) where T : class
{
List<Transaction<T>> transactions = JsonConvert.DeserializeObject<List<Transaction<T>>>(postdata);
return transactions;
}
もう 1 つ、タイプを強化したモデルを作成する方法があります。これは、DataSet
から取得した各 DataTable
の構造に対応しています。カスタム タイプのフィールドは、それで表現する DataTable
の DataColumns
のタイプとキーを一致させてください。このモデルは、LoadTransactions メソッドで使用します。
サンプル DataSet の編集 では、DataSet
にバインドして、LoadTransactions
メソッドのルート テーブルのレイアウトに基づいてモデルを渡すときの更新機能の使用方法を紹介します。
Updating 機能を使用するときは、DataTables
に PrimaryKeys
を定義している場合、igHierarchicalGrid
はそれを自動的に使用します。自動的に使用しない場合は、ColumnLayouts
で手動設定してください。更新機能を有効にしたとき、以上の設定が必要です。
C# の場合:
GridModel grid = new GridModel();
grid.PrimaryKey = "DepartmentID";
DataSet
にバインドして、手動でレイアウトを作成するとき、データセット テーブルのコレクションでは、各 ColumnLayout
の DataMember
がそれぞれ対応する DataTable
の名前に設定されます。
igHierarchicalGrid
をビューに定義して、DataSet
をグリッドのモデルとして使用すると、列は自動生成以外では生成できなくなります。列を手動で定義するときは、DataTable
構造に対応したモデルを定義し、それをグリッドのタイプとして設定してください。
タイプを強化して DataSet
から取得した各 DataTable
の構造に対応させたモデルを作成してください。そうすれば、グリッドの Ignite UI for MVC をビューで使用できます。
注: カスタム タイプ Customer のフィールドでは、そのフィールドが表す DataTable の DataColumns のタイプとキーを一致させてください。
C# の場合:
DataTable dtCustomers = new DataTable("Customers");
dtCustomers.Columns.Add("CustomerID", typeof(int));
dtCustomers.Columns.Add("CustomerName ", typeof(string));
DataTable dtData = new DataTable("Orders");
dtData.Columns.Add("OrderID", typeof(int));
dtData.Columns.Add("CustomerID ", typeof(int));
dtData.Columns.Add("OrderQty", typeof(int));
C# の場合:
public class Customer
{
public int CustomerID { get; set; }
public string CustomerName { get; set; }
public List<Order> Orders { get; set; }
}
public class Order
{
public int OrderID { get; set; }
public int OrderQty { get; set; }
}
ASPX の場合:
// class Customer copies the structure of the root DataTable
// additionally class Order is created
// and has the same fields as table Orders columns
@(Html.Infragistics().Grid<Infragistics.Web.Mvc.Samples.Models.Customer>(Model)
.ID("grid1").Height("550px").Width("100%"). PrimaryKey("CustomerID")
.Columns(column =>
{
column.For(x => x.CustomerID).HeaderText(“CustomerID”);
}).
ColumnLayouts(layouts => {
layouts.For(x => x.Orders).ResponseDataKey(String.Empty).Width("100%").ForeignKey("CustomerID").PrimaryKey("OrderID")
.AutoGenerateColumns(false).AutoGenerateLayouts(false)
.Columns(childcolumn =>
{
childcolumn.For(x => x.OrderID).HeaderText(“OrderID”);
}).Features(features => features.Updating().EditMode(GridEditMode.Row).ColumnSettings(
cs => cs.ColumnSetting().ColumnKey("OrderID").ReadOnly(true)
));
})
オンラインで表示: GitHub