読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

FlexGrid for ASP.NET MVCで非連結データを挿入する (1):CollectionViewサービスを使用する

非連結のFlexGridにデータを挿入する方法について2回に渡って説明します(FlexGridは、非連結と連結データの両方を対応しています)。

 

≫ ComponentOne Studioのダウンロードはこちら

 

本例では、サーバー側のSalesクラスをモデルとしています。
「Product」、「Country」、「Amount」の3つの列のデータを挿入します。
非連結グリッドであるため、データをクライアント側でグリッドに挿入しなければなりません。

 

非連結のFlexGridにデータを挿入する方法は2つあります。

このブログでは、より簡単な方法であるCollectionView サービスを使用する方法について説明します。

 

CollectionViewサービスを使用するためにプロジェクトを設定する

まず、プロジェクトを設定しましょう。

  1. Visual Studioにて、 [C1 ASP.NET MVC 5 アプリケーション] テンプレートを使用して新規プロジェクトを作成します。
  2. プロジェクトウィザードで[クライアントIntelliSenseの有効化]チェックボックスをオンにしてクライアント側の TypeScript インテリセンスを有効にします (クライアント側でのTypeScriptの使用をお勧めしますが、必須ということではありません)。

 

プロジェクトにモデルを追加する

「モデル」フォルダにSalesというクラスを作成します。Salesクラスは、Salesオブジェクトのリストを返します。

 

using System;
using System.Collections.Generic;
using System.Linq;
namespace UnboundFlexGrid.Models
{ 
	public class Sale
  {
    public int ID { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public string Country { get; set; }
    public string Product { get; set; }
    public string Color { get; set; }
    public double Amount { get; set; }
    public double Amount2 { get; set; }
    public double Discount { get; set; }
    public bool Active { get; set; }

    public MonthData[] Trends { get; set; }
    public int Rank { get; set; }

    private static List<string> COUNTRIES = new List<string> { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
    private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" };

    /// <summary>
    /// データを取得します。
    /// </summary>
    /// <param name="total"></param>
    /// <returns></returns>
    public static IEnumerable<Sale> GetData(int total)
    {
      var colors = new[] { "Black", "White", "Red", "Green", "Blue" };
      var rand = new Random(0);
      var dt = DateTime.Now;
      var list = Enumerable.Range(0, total).Select(i =>
      {
        var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
        var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
        var color = colors[rand.Next(0, colors.Length - 1)];
        var startDate = new DateTime(dt.Year, i % 12 + 1, 25);
        var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);

        return new Sale
        {
          ID = i + 1,
          Start = startDate,
          End = endDate,
          Country = country,
          Product = product,
          Color = color,
          Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
          Amount2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
          Discount = Math.Round(rand.NextDouble() / 4, 2),
          Active = (i % 4 == 0),
          Trends = Enumerable.Range(0, 12).Select(x => new MonthData { Month = x + 1, Data = rand.Next(0, 100) }).ToArray(),
          Rank = rand.Next(1, 6)
        };
      });
      return list;
    }

    public static List<string> GetCountries()
    {
      var countries = new List<string>();
      countries.AddRange(COUNTRIES);
      return countries;
    }

    public static List<string> GetProducts()
    {
      List<string> products = new List<string>();
      products.AddRange(PRODUCTS);
      return products;
    }
  }

  public class MonthData
  {
    public int Month { get; set; }
    public double Data { get; set; }
  }

  public class BasicSale
  {
    public int Sale { get; set; }
    public DateTime Date { get; set; }

    public BasicSale(int sale, DateTime date)
    {
      Sale = sale;
      Date = date;
    }
    public static List<BasicSale> GetBasicSales()
    {
      List<BasicSale> list = new List<BasicSale>();
      int[] sales = {
      96, 19, 54, 83, 15, 56, 36, 4, 29, 93,
      38, 71, 50, 77, 69, 13, 79, 57, 29, 62,
      4, 27, 66, 96, 65, 12, 52, 3, 61, 48, 50,
      70, 39, 33, 25, 49, 69, 46, 44, 40, 35,
      72, 64, 10, 66, 63, 78, 19, 96, 26};
      for (int i = 0; i < sales.Length; i++)
      {
        list.Add(new BasicSale(sales[i], new DateTime(2014, i / 31 + 1, i % 31 + 1)));
      }
      return list;
    }
  }
}
 
コントローラー

HomeController.cs を開いて、Sales データを返すように Index アクションを更新します。

 

public class HomeController : Controller
{
    public ActionResult Index()
    {
      return View(Sale.GetData(10));   
    }
}
 
ビュー
  1. ソリューションエクスプローラーで、[ビュー]→[Home]フォルダ内のIndex.cshtmlファイルを開きます。
  2. すべての内容を削除します。
  3. 以下のように組み込みのプロパティを宣言することでCollectionViewServiceとFlexGridを設定します。

 

 @using UnboundFlexGrid.Models
 <script src="~/Scripts/app.js"></script>
 @model IEnumerable<Sale>
 
 @(Html.C1().CollectionViewService().Id("cv").Bind(Model))
 
 @* Loads from a List collection *@
 <input type="button" onclick="populate()" value="CollectionViewを読み込む" />
 
 @(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false)
 .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
 .Columns( col => {
 col.Add(cb => cb.Name("Product").Header("Product"));
 col.Add(cb => cb.Name("Country").Header("Country"));
 col.Add(cb => cb.Name("Amount").Header("Amount"));
 }))

 

FlexGridにデータを挿入する

FlexGridにデータを挿入するには、ComponentOne プロジェクトテンプレートウィザードで追加されたapp.tsファイルを開き、以下のスクリプトを追加します。

 

function populate()
{
    //FlexGridの参照を取得します。
    var fg = <wijmo.grid.FlexGrid>wijmo.Control.getControl("#fg"); 
   //CollectionViewサービスの参照を取得します。
    var cv = <wijmo.collections.CollectionView>c1.getService('cv');
    var total = cv.items.length;
    fg.rows.clear();
    for (var i = 0; i <= total - 1; i++)
    {
        var obj = [cv.items[i].Product, cv.items[i].Country, cv.items[i].Amount];
        var row = new wijmo.grid.Row();
        fg.rows.push(row);
        for (var c = 0; c <= fg.columns.length - 1; c++)
        {
            fg.setCellData(i, c, obj[c]);
        }
    }
}

 

上記のスクリプトは次のようにFlexGridにデータを挿入します。

  1. サーバー側CollectionViewサービスの参照を取得します(ここで、CollectionViewはモデルデータを持っていることにご注意ください)。
  2. FlexGridのクライアント側参照を取得します。
  3. FlexGridに追加する行数を確定するため、コレクションの各項目をループ処理します。
  4. CollectionViewから必要な3つの列の値を配列として取得します。
  5. FlexGridのsetCellDataメソッドを使用してFlexGridセルにデータを追加します。
  6. Layout.cshtml や Index.cshtmlファイルに 上記のapp.tsファイルの参照を追加します。
  7. アプリケーションを実行し、[CollectionViewを読み込む]ボタンを押下すると、FlexGridにデータが挿入されます。

 

次は、AJAXを使用してFlexGridにデータを表示する方法を紹介します。

 

 ※本ブログの内容は、下記英語版のブログを翻訳したものです。

   ≫ Hopulate Data to an Unbound Grid, Part I: Use Server Side CollectionView Service

 

ComponentOne