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