このトピックでは、オン デマンドでデータを一度に igHierarchicalGrid™ に読み込む方法を 2 通り紹介します。
このトピックは、以下のセクションで構成されます。
ロード オン デマンドがクライアントで無効になっている場合、データ セット全体がサーバーから取得されます。ロード オン デマンドが有効な場合、必要なデータ セットのみ取得されます。JSON 形式では、ロード オン デマンドが有効な場合、子データのない JSON ファイルが生成されます。
Ignite UI for jQuery または Ignite UI for MVC のどちらかが使用されているかにより、igHierarchicalGrid に対するロード オン デマンドの動作が異なります。ウィジェットにはロード オン デマンドの特定のプロパティはありませんが、oData プロトコルを使用してこの効果を得ることができます。つまり、データはそのプロトコルをサポートしているリモート サーバーから取得される必要があります。
一方 Ignite UI for MVC Hierarchical Grid には Load On Demand プロパティがあり、そのプロパティが true に設定されている場合、コントロールは要求されたレイアウトのデータのみをクライアントに送信します。
次に続くテキスト ブロックは、これら 2 種類のアプローチをそれぞれ実装する方法を示しています。
jQuery でデータ セット全体を一度に読み込むには、次が必要です。
JavaScript の場合:
$("#gridAllData").igHierarchicalGrid({
odata: false,
initialDataBindDepth: 1,
dataSource: jsonAllData
}
注:
データ ソースの階層レベルも 1
の場合、initialDataBindDepth
の値を 1
に設定します。データ ソースのレベル数がわからない場合、値を -1
に設定します。これは、igHierarchicalGrid がすべてのレベルをバインドすることを意味します。
MVC の場合は、データをオン デマンドで読み込まないよう構成します (LoadOnDemand = false
)。
C# の場合:
GridModel allDataGridModel = new GridModel();
allDataGridModel.LoadOnDemand = false;
jQuery のすべてのデータをオン デマンドで読み込むには、次が必要です。
oData
」プロパティを true
に設定します。これは、oData プロトコルを使用してデータをオン デマンドで読み込むことを意味します。JavaScript の場合:
$("#gridAllData").igHierarchicalGrid({
odata: true,
initialDataBindDepth: 0,
dataSource: jsonoData
});
MVC でロード オン デマンドを構成する場合、igHierarchicalGrid は View で初期化できません。代わりに、すべての igHierarchicalGrid プロパティを Controller または Model のいずれかで設定する必要があります。jQuery のすべてのデータをオン デマンドで読み込むには、LoadOnDemand
プロパティを true
に設定し、GetData
メソッドを呼び出します。
レイアウトごとに、必要なデータを返すメソッドを用意します。これは、2 つのレベルの階層を持つ igHierarchicalGrid がある場合、親データを返すメソッドが 1 つ、子レイアウトのデータを返すメソッドが 1 つ必要なことを意味します。
C# の場合:
public ActionResult Index()
{
GridModel productModel = GetProductModel();
return View(productModel);
}
/* configures the parent layout */
private GridModel GetProductModel()
{
GridModel gridModel = new GridModel();
gridModel.AutoGenerateColumns = true;
gridModel.AutoGenerateLayouts = false;
gridModel.LoadOnDemand = true;
gridModel.DataSourceUrl = Url.Action("BindProduct");
GridColumnLayoutModel childModel = GetProductInventoryModel();
gridModel.ColumnLayouts.Add(childModel);
return gridModel;
}
/* configures the child layout */
private GridColumnLayoutModel GetProductInventoryModel()
{
GridColumnLayoutModel childModel = new GridColumnLayoutModel();
childModel.Key = "ProductInventory";
childModel.PrimaryKey = "LocationId";
childModel.ForeignKey = "ProductId";
childModel.DataSourceUrl = Url.Action("BindProductInventory");
return childModel;
}
DataSourceUrl
メソッドは、igHierarchicalGrid で必要なため JSONResult
形式でデータを返すはずです。igHierarchicalGrid にはそのような機能を備えたメソッド GetData() があります。したがって、ソースからデータを取得し、そのデータを igHierarchicalGrid に設定して、そのメソッドを呼び出すだけです。
コード リスト 1: 親レベルのデータを返すメソッド
C# の場合:
public JsonResult BindProduct()
{
var ctx = new AdventureWorksDataContext(@"ConnString");
var ds = ctx.Products.Take(3);
GridModel productModel = GetProductModel();
productModel.DataSource = ds;
return productModel.GetData();
}
コード リスト 2: 子レベルのデータを返すメソッド
C# の場合:
public JsonResult BindProductInventory(string path, string layout)
{
var ctx = new AdventureWorksDataContext(@"ConnString");
var ds = ctx.ProductInventories;
GridColumnLayoutModel productInventoryModel = GetProductInventoryModel();
productInventoryModel.DataSource = ds;
return productInventoryModel.GetData(path, layout);
}
子レイアウトをオンデマンドでバインドする場合、コード リスト 2 のように子の GridColumnLayoutModel
インスタンスを使用する必要があります。
igHierarchicalGrid がオン デマンドでデータを読み込む場合、内部要求を行い、必要なパラメーターを設定します。これらのパラメーターは、どのレイアウト データが必要かメソッドに指示します。MVC igHierarchicalGrid ラッパーはこれを内部処理するため、これらのパラメーターを指定したデータ メソッドを定義し、それらを GetData
メソッドに渡すだけです。(コード リスト 2) パラメーター:
パスの形式は PrimaryKeyID/ChildKeyID1/childKeyID2[layout_name]
です。たとえば、パスの形式が「1[0]/2[0]
」の場合、2 番目の親行の最初のレイアウトの 3 番目の子行の最初の子レイアウトを指定していることになります。
空のルートはルート グリッドを返すため、親グリッドのデータ メソッドを呼び出す場合 (コード リスト 1)、パラメーターを指定する必要はありません。
上記 2 つの例 (コード リスト 1 およびコード リスト 2) では、データの関係は次のとおりです。
オンラインで表示: GitHub