DataMap

FlexGrid コントロールは、グリッドに自動検索機能を提供するデータマッピングをサポートします。グリッドにデータベースからのデータを表示する際、基本のデータ構造を変更せずにクライアント側に表示される値を編集する場合に自動検索機能が役立ちます。例えば、製品名を「ID」列の代わりに「製品名」列に表示でき、「色」列に色を参照する16進コードの代わりに色の名前を表示できます。

次の図は、DisplayMemberPathプロパティとSelectedValuePathプロパティを使用して「製品名」列と「色」列にDataMapを割り当てた後のFlexGridコントロールを示しています。

グリッド内の「製品名」列と「色」列にDataMapを割り当てない場合、これらの列ではデータソースから取得された製品IDおよび16進コードが表示されます。

次のコード例は、FlexGrid コントロールでデータマッピングを作成する方法を示します。この例では、「クイックスタート」でアプリケーションに追加した Sale.csモデル、とCustomerSale.csモデルを使用します。

コードの場合

CustomerSale.cs

C#	コードのコピー
Type your example code here. It will be automatically colorized when you switch to Preview or build the help system.

コントローラコード

以下のように、コントローラーへの参照を追加します。

C#	コードのコピー
using System.Collections.Generic;using System.Linq;using System.Web.Mvc;using <ApplicationName>.Models;using C1.Web.Mvc;using C1.Web.Mvc.Serializition;

Razor	コードのコピー
public partial class DataMapController : Controller { public static List<Sale> SALES = CustomerSale.GetData(15).ToList(); public ActionResult Index() { ViewBag.Products = CustomerSale.PRODUCTS; ViewBag.Colors = CustomerSale.COLORS; return View(SALES); } public ActionResult ProductsUpdate([C1JsonRequest] CollectionViewEditRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, sale => { string error = string.Empty; bool success = true; var fSale = SALES.Find(item => item.ID == sale.ID); fSale.アクティブ = sale.アクティブ; fSale.金額 = sale.金額; fSale.色 = sale.色; fSale.国名 = sale.国名; fSale.割引 = sale.割引; fSale.終了日 = sale.終了日; fSale.金額2 = sale.金額2; fSale.開始日 = sale.開始日; fSale.製品名 = sale.製品名; return new CollectionViewItemResult<Sale> { Error = error, Success = success && ModelState.IsValid, Data = fSale }; }, () => SALES)); } }

Razor

コードのコピー

public partial class DataMapController : Controller
{
    public static List<Sale> SALES = CustomerSale.GetData(15).ToList();
    public ActionResult Index()
    {
        ViewBag.Products = CustomerSale.PRODUCTS;
        ViewBag.Colors = CustomerSale.COLORS;
        return View(SALES);
    }
    public ActionResult ProductsUpdate([C1JsonRequest]
        CollectionViewEditRequest<Sale> requestData)
    {
        return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, sale =>
        {
            string error = string.Empty;
            bool success = true;
            var fSale = SALES.Find(item => item.ID == sale.ID);
            fSale.アクティブ = sale.アクティブ;
            fSale.金額 = sale.金額;
            fSale.色 = sale.色;
            fSale.国名 = sale.国名;
            fSale.割引 = sale.割引;
            fSale.終了日 = sale.終了日;
            fSale.金額2 = sale.金額2;
            fSale.開始日 = sale.開始日;
            fSale.製品名 = sale.製品名;
            return new CollectionViewItemResult<Sale>
            {
                Error = error,
                Success = success && ModelState.IsValid,
                Data = fSale
            };
        }, () => SALES));
    }
}

Viewコード

Razor	コードのコピー
@model IEnumerable<Sale> @using C1.Web.Mvc.Grid @{ var products = ViewBag.Products; var colors = ViewBag.Colors; } @(Html.C1().FlexGrid<Sale>() .Id("ovFlexGrid") .AutoGenerateColumns(false) .Bind(bl => bl.InitialItemsCount(15).Bind(Model) .Update(Url.Action("ProductsUpdate"))) .CssClass("grid") .IsReadOnly(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("開始日").Format("MMM d yy")); bl.Add(cb => cb.Binding("終了日").Format("HH:mm")); bl.Add(cb => cb.Binding("国名")); bl.Add(cb => cb.Binding("製品名") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Id") .Bind(products))); bl.Add(cb => cb.Binding("色") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Value") .Bind(colors))); bl.Add(cb => cb.Binding("金額").Format("c")); }) )

Razor

コードのコピー

@model IEnumerable<Sale>
@using C1.Web.Mvc.Grid
@{
    var products = ViewBag.Products;
    var colors = ViewBag.Colors;
}

@(Html.C1().FlexGrid<Sale>()
    .Id("ovFlexGrid")
    .AutoGenerateColumns(false)
    .Bind(bl => bl.InitialItemsCount(15).Bind(Model)
    .Update(Url.Action("ProductsUpdate")))
    .CssClass("grid")
    .IsReadOnly(false)
    .Columns(bl =>
    {
        bl.Add(cb => cb.Binding("ID"));
        bl.Add(cb => cb.Binding("開始日").Format("MMM d yy"));
        bl.Add(cb => cb.Binding("終了日").Format("HH:mm"));
        bl.Add(cb => cb.Binding("国名"));
        bl.Add(cb => cb.Binding("製品名")
            .DataMap(dm => dm.DisplayMemberPath("Name")
                .SelectedValuePath("Id")
                .Bind(products)));
        bl.Add(cb => cb.Binding("色")
            .DataMap(dm => dm.DisplayMemberPath("Name")
                .SelectedValuePath("Value")
                .Bind(colors)));
        bl.Add(cb => cb.Binding("金額").Format("c"));
    })
)