喜帳面の日記

50歳越えおやじのASP.NET　MVC　への挑戦日記です。

ASP.NET MVC Razor をやってみた。　IgniteUI　編　その２　igGridのロードオンデマンドについて(2/2)

igGrid Ignite UI MVC MVC４ ASP.NET Razor Grid igniteui

ASP.NET MVC 周辺の記事を書きたいなと思います。ここしばらくは、私が運営している [喜帳面.net]で使ってる、お気に入りの開発ツール「IgniteUI」の周辺について [喜帳面.net]での事例などを織り交ぜながら、メモを残しています。

対象の環境は、ASP.NET MVC4 RazorでIgniteUIは2013 Volume 2　です。ちょっと古いけどあしからず。

 さて、今回は前回に続き、igGridのロードオンデマンドについてのメモです。

Grid上の表示不要列をクライアント側で描画後に隠すのではなく、ロードオンデマンド機能を使って、列自体の定義をしないことによって見せなくする方法について記載します。

まず、ロードオンデマンド機能を使う場合のViewの記述はこんな感じになります。

<_sellistOndm>

ポイントになりそうな部分は、以下の２行です。

３行目：使用modelは「 Infragistics.Web.Mvc.GridModel」にする

15行目：@(Html.Infragistics().Grid(Model))

Viewの定義はこれだけです。

 あとは、ControllerでModelを用意しViewを呼び出します。

※[喜帳面.net]の「取引伝票の発行」では抽出条件の入力後に[一覧表示]ボタンをクリックするとigGridを持つPartialViewを表示するようにしています。

 

Controllerの抜粋

14行目： GetGridModelを呼び出してInfragistics.Web.Mvc.GridModelを生成しています。this.repository.GetGridModelの部分は各プロジェクト要件に合わせてください。

15行目：前述のView名とModelを指定してPartialViewResultを返しています。　

 ここまでは単純でした。ロードオンデマンド機能の肝は「GridModel」を作成する部分にあります。上記の例では14行で呼び出される「GetGridModel」の中身の記述です。

「GetGridModel」の例示ができればいいのですが、この部分はボリュームのあるコードにりますので要点だけ記述いたします。（私のコードがきれいにできてないってのが大きな理由です）

 

GetGridModelはこんな感じになります

１．GridModelを用意します。

gridModel = new GridModel();てな感じ。事前にusing Infragistics.Web.Mvc;入れておいてください。

２．親階層の定義を登録します。

 VisualStudioでGridModelの定義を確認してください。60超の項目が存在しますが、いずれもロードオンデマンド機能を使用しない場合にView(cshtml)で定義する項目たちなのでgridをいくつか作成したことのある方なら馴染みのある項目名です。また各項目の意味についてはヘルプのオプションを見ると理解できると思います。

拙作[喜帳面.net]では、現在、以下の項目に値をセットしています。

AutoGenerateColumns = False
AutoGenerateLayouts= False
ColumnLayouts  ※後述　子階層の定義を格納します
Columns        ※後述　親階層の各カラムの定義を格納します。
DataSourceUrl  ※後述　親階層のデータ取得URL
Height
ID（gridの要素ID）
LoadOnDemand = true
PrimaryKey = "PKey " ※PrimaryKeyのカラム名
Width
Features      ※後述

※DataSourceUrlのセット

親階層のレコード取得時のURL。コントローラーのAction名を指定

例えば、DataSourceUrl = Url.Action("GetListParentData", new { Joken1 = joken1 });

 

※Columnsのセット

 ColumnsはList<GridColumn>型です。GridColumnの定義を確認してください。11項目ほどの項目がありますが、いずれもロードオンデマンド機能を使用しない場合にView(cshtml)の.Columns({column.For})で定義する項目たちです。

GridColumn clm = new GridColumn();
clm.DataType = "number";
clm.Format = "#,##0";
clm.HeaderText = "金額";
clm.Key = "Kingaku" ;
clm.Template = "<div align=right>${Kingaku}</div>";
clm.Width = "100px";
....割愛...
Columns.Add(clm)

こんな感じで、Grid上への表示順に必要な列分ColumnsにGridColumnを追加します。

grid上に表示しないのなら、追加しなければいい　という訳です。また、隠し列にする場合はHidden = true;とします。 

 

※Featuresのセット

 FeaturesはList<GridFeature>型です。GridFeatureの定義はDictionaryになっていますが、いずれもロードオンデマンド機能を使用しない場合にView(cshtml)の..Featuresで定義する項目たちです。

使用する機能のClassを用意して順次Featuresに追加します。

例えば、Pagingの場合なら 

GridPaging fp = new GridPaging();
fp.Type = OpType.Local;
fp.Inherit = false;
fp.PageSize = 10;
fp.VisiblePageCount = 1;
....割愛...
Features.Add(fp);

こんな感じです。

 Featuresで使用するclassには以下のものがあります。（全部ではありません。一部です）機能名の頭にGridをつけたらclass名になるような命名ですね。

GridPaging

GridSelection

GridRowSelectors

GridColumnMoving

GridFiltering（※）

GridSorting（※）

GridResizing

GridTooltips（※）

GridUpdating（※）

GridHiding（※）

, etc

尚、（※）がついているclassについては、ColumnSettingsのListをもっていますので、Columnsのセット時同様、カラム毎の情報をセットする必要があります（ある場合があります）。

以上、親階層のセット項目でした。

階層型のGridでない場合は以上で終わりです。

 

３．子階層の定義を登録します。

 ※ColumnLayouts　のセット 

次に階層型Gridの場合の子階層の情報をColumnLayoutsにセットします。

 ColumnLayoutsはList<IGridModel>型になっています。

いずれもロードオンデマンド機能を使用しない場合にView(cshtml)の..ColumnLayouts(layouts =>{}で定義する項目たちです。

親階層で各項目にセットしたのと同様に子階層の情報についてGridColumnLayoutModelを作成し値セットしたうえでColumnLayoutsにaddといった手順でいけます。

例えば、こんな感じです。

 

 もし、子階層の下に孫階層がある場合はｍ子階層のColumnLayoutsに孫階層の情報をセットすることになります。

再び<Controller> について。

今までの手順で、igGrideの定義が準備できました。

次に、データの受け渡し部分です。

前述の<Controller>の_sellistOndmアクションが実行されたところで、クライアントに　igGrideの定義が渡されます。その定義内の「DataSourceUrl」で指定したアクションが呼び出されます。このアクションで親階層用のデータを渡します。

前述の例では「DataSourceUrl」にアクション名"GetListParentData"と引数"Joken1"をセットしていました。対応するアクションの記述はこんな感じです。

//Grid親階層のデータを返します
public JsonResult GetListParentData(int Joken1)
{
    //伝票一覧の取得
    List<Parentdata> itemList = new List<Parentdata>(); //親階層用一覧のListを用意
    this.repository.GetGridData(Joken1, itemList);      //Listにデータを格納
    return Json(itemList, JsonRequestBehavior.AllowGet);//ListをJsonにして返す
}

 次に、子階層データの受け渡し部分。

子階層のDataSourceUrlに ”GetListChildData” をセットしたとして。以下のようなかんじになります。

//Grid子階層のデータを返します
public JsonResult GetListChildData(string path, string layout)
{
    List<Childdata> itemList = new List<Childdata>();         //子階層用一覧のListを用意
    this.repository.GetGridChildData(path, layout, itemList); //Listにデータを格納
    return Json(itemList, JsonRequestBehavior.AllowGet);      //ListをJsonにして返す
}

 引数"path"には"名前:値"の形式でセットされます。
名前は親階層の[PrimaryKey]にセットした列名。
値には展開した親行の[PrimaryKey]の値。となります。

 引数"layout"には子階層の[key]にセットした値がセットされてきます。

これら引数の情報より、子階層のデータを取得して返してあげます。

以上で、ロードオンデマンドを使用したigGridの出来上がりです。

 GridModel を作成する部分にちょっと手間がかかりますが、汎用的に使い回しできるclassに仕上げておきたいですね。

そこまでできたら、cshtmlのgridoptionを直接記述するよりも、手軽で汎用性も高く保守面でも有利になるように私は思うのですが、いかかでしょうか？

今回は以上です。