喜帳面の日記

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

Visual Studio Express 2012 for Web でいってみる 26.Ignite UIのGridを使ってみた。DataSource編

Visual Studio Express 2012 for Web MVC４ Razor Ignite UI Grid igniteui

 

以前の記事、
Visual Studio Express 2012 for Web でいってみる 21.Ignite UIを使ってみた。
で、Ignite UI について紹介しましたが、今回はその続編です。
MVC4＋Razorの環境で　Ignite UIのGridを使用する場合の、DataSource指定についてメモを残しておきます。
 
今回の出来上がりイメージは以下の２つのグリッドです。

f:id:SannomiyaNotes:20130427073523p:plain

 左の「商品区分一覧」は階層を持たないグリッドで、右の「商品区分別商品一覧」は１層目が「商品区分」２層目が「商品」となる階層化グリッドです。

 さて、igGridのデータの取得方法は何通りかありますが、今回は、Viewを使う方法とjsonを使う方法を紹介します。

 
まず、階層なしのgridの場合について。
■DataSourceにViewを使用する場合
<Controller>
        //Viewで商品区分データを渡します。
        [GridDataSourceAction]
        public ActionResult GetViewDataShouhinKBN()
        {
            IQueryable model = ShouhinData.GetKubunCDList();
            return View(model); //PartialView(model)でもOK
        }
属性[GridDataSourceAction]を記述します。これを忘れると
Microsoft JScript 実行時エラー: データを取得するリモート要求に失敗しました。
が発生するようです。尚、[GridDataSourceAction]を使うためには、
using Infragistics.Web.Mvc;の記述が必要です。
<cshtml>のGrid部分の記述
 @(Html.Infragistics().Grid()
     .ID("ShouhinKBNGrid")
     .AutoGenerateColumns(false)
     .AutoGenerateLayouts(false)
     .PrimaryKey("KubunCD")
     .Columns(column => {
         column.For(x => x.KubunCD).HeaderText("CD").Width("100px");
         column.For(x => x.Kubunmei).HeaderText("区分名").Width("200px");
     })
             .Features(features =>
             {
                 features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
                 features.Paging().Type(OpType.Local);
             })
     //DataSourceがViewの場合
     .DataSourceUrl(Url.Action("GetViewDataShouhinKBN")) 

     .LoadOnDemand(false)
     .Width("400px")
     .Height("450px")
     .DataBind()
     .Render()
   )
 
■DataSourceにJsonを使用する場合
<Controller>
   public JsonResult GetJsonDataShouhinKBN()
   {
        IQueryable model = ShouhinData.GetKubunCDList();
        return Json(model, JsonRequestBehavior.AllowGet);
    }
属性[GridDataSourceAction]は記述しません。書くと、
Microsoft JScript 実行時エラー: データを取得するリモート要求に失敗しました。
が発生するようです。
 <cshtml>のGrid部分の記述
 @(Html.Infragistics().Grid()
     .ID("ShouhinKBNGrid")
     .AutoGenerateColumns(false)
     .AutoGenerateLayouts(false)
     .PrimaryKey("KubunCD")
     .Columns(column => {
         column.For(x => x.KubunCD).HeaderText("CD").Width("100px");
         column.For(x => x.Kubunmei).HeaderText("区分名").Width("200px");
     })
             .Features(features =>
             {
                 features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
                 features.Paging().Type(OpType.Local);
             })
     //DataSourceがJsonの場合
     .DataSourceUrl(Url.Action("GetJsonDataShouhinKBN")) 
     .LocalSchemaTransform(true)

     .LoadOnDemand(false)
     .Width("400px")
     .Height("450px")
     .DataBind()
     .Render()
   )
  .LocalSchemaTransform(true)の記述を入れます。
これが無いと、
実行時エラー: プロパティ 'length' の値を取得できません: オブジェクトは Null または未定義です。
が発生します。
 
 次に階層化グリッドの場合
ちなみにModel　classは、こんなかんじです。
    // 商品区分
    public class KubunMS
    {
        public int KubunCD { get; set; }
        public string Kubunmei { get; set; }
    }
    
    // 商品
    public class Shouhin
    {
        public int ShouhinCD { get; set; }
        public string ShouhinName { get; set; }
        public int KubunCD { get; set; }
    }

    //商品区分別商品データ
    public class HierShouhin
    {
        public HierShouhin()
        {
            this.Shouhins = new HashSet();
        }
        public int KubunCD { get; set; }
        public string Kubunmei { get; set; }
        public virtual ICollection Shouhins { get; set; }
    }
 
 ■DataSourceにViewを使用する場合（というかJsonではできなかった）
 <Controller>
 //Viewで商品区分別商品データを渡します。
 [GridDataSourceAction]
 public ActionResult GetViewDataHierShouhin()
 {
     IQueryable model = GetHierShouhin();
     return View(model);  //return PartialView(model);でもOK
 }

 //商品区分別商品データをセットし返します
 public IQueryable GetHierShouhin()
 {
     List ItemList = new List();
     var kubunData = ShouhinData.GetKubunCDList();
     foreach (var KBNitems in kubunData)
     {
         var hierShouhin = new HierShouhin();
         hierShouhin.KubunCD = KBNitems.KubunCD;
         hierShouhin.Kubunmei = KBNitems.Kubunmei;
         hierShouhin.Shouhins = GetShouhinList(hierShouhin.KubunCD);
         ItemList.Add(hierShouhin);
     }
     return ItemList.AsQueryable();
 }

 //商品データの取得
 public List GetShouhinList(int KubunCD)
 {
     List ItemList = new List();
     var shouhins = ShouhinData.GetShouhinList(KubunCD);
     foreach (var SHNitems in shouhins)
     {
         var shouhin = new Shouhin();
         shouhin.ShouhinCD = SHNitems.ShouhinCD;
         shouhin.ShouhinName = SHNitems.ShouhinName;
         shouhin.KubunCD = SHNitems.KubunCD;
         ItemList.Add(shouhin);
     }
     return ItemList;
 }
属性[GridDataSourceAction]を記述します。
using Infragistics.Web.Mvc;の記述が必要です。
 
 <cshtml>のGrid部分の記述
 @(Html.Infragistics().Grid()
 .ID("ShouhinGrid")
 .InitialExpandDepth(-1)
 .LoadOnDemand(false)
 .AutoGenerateColumns(false)
 .AutoGenerateLayouts(false)
 .PrimaryKey("KubunCD")
 .Columns(column => {
     column.For(x => x.KubunCD).HeaderText("CD").Width("60px");
     column.For(x => x.Kubunmei).HeaderText("区分名").Width("200px");
     })
 .ColumnLayouts(layouts =>
         {
             layouts.For(x => x.Shouhins)
                 .PrimaryKey("ShouhinCD")
                 .ForeignKey("KubunCD")
                 .AutoGenerateColumns(false)
                 .AutoGenerateLayouts(false)
                 .Columns(childcolumn =>
                 {
                     childcolumn.For(x => x.ShouhinCD).HeaderText("CD").Width("60px");
                     childcolumn.For(x => x.ShouhinName).HeaderText("商品名").Width("200px");
                     childcolumn.For(x => x.KubunCD).HeaderText("区分").Width("50px");
                 });
         })
 .Features(features =>
 {
     features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);//.WrapAround(true).Activation(true);
     features.Paging().Type(OpType.Local);
 })
 //DataSourceがViewの場合
 .DataSourceUrl(Url.Action("GetViewDataHierShouhin","Test")) 

 .LoadOnDemand(false)
 .Width("400px")
 .Height("450px")
 .DataBind()
 .Render())
 こんな風になりました。 .ColumnLayouts　以降の部分が２層目の定義で
 .ForeignKeyで第１階層とリレーションします。
一方、階層グリッドをjsonで行う方法ですが、現時点ではまだ実現できていません。
何がいけないのか、どうやってもエラーになっている状況です。
 igGridは非常に多機能すぎるが故にパラメータ設定で混乱している状況なのかも。
私の場合、グリッドについてはViewでデータを渡す手法に統一しようと思います。
 
参考URL