FlexGrid
データマップ
機能
サンプル
データマップ
データマップは、グリッドに自動検索機能を提供します。たとえば、顧客の ID の代わりに顧客名、RGB 値の代わりに色名を表示できます。
関連付けられたデータマップを持つ列は、連結値の代わりにマップされた表示値に基づいてソートすることができます。
関連付けられたデータマップを持つ列は、AutoComplete、DropDownList、または RadioButtons として表示できます。これらのタイプを選択するには、DataMapEditorプロパティを設定します。
複数列のデータマップ
FlexGrid の列の DropDownCssClass プロパティを使用して、 データマップ列の値の編集に使用できるドロップダウンのスタイルを設定できます。
複数列エディタの実例を表示するには、 「Color」の列でいずれかのドロップダウンボタンをクリックするか、その列で セルを選択して[F4]を押します。
動的なデータマップ
条件によっては、ドロップダウンに表示する値をフィルタリングするためにDataMapを動的に使用することもできます。
たとえば、下のグリッドは、国と都市を含むデータ項目のリストを示しています。ドロップダウン都市リストには、データ項目の国の都市のみが含まれます。
ソース
DataMapController.cs
using System; using System.Collections; using System.Globalization; using System.Linq; using System.Web.Mvc; using C1.Web.Mvc; using MvcExplorer.Models; using System.Collections.Generic; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public static List<Sale> SALES = CustomerSale.GetData(100).ToList(); public ActionResult DataMap() { ViewBag.Countries = CustomerSale.NAMEDCOUNTRIES; ViewBag.Products = CustomerSale.PRODUCTS; ViewBag.Colors = CustomerSale.COLORS; ViewBag.Ranks = CustomerSale.RANKS; ViewBag.FullCountries = FullCountry.GetCountries(); ViewBag.Cities = CitySale.GetCities(); ViewBag.CitiesSales = CitySale.GetData(28); return View(SALES); } public ActionResult RemoteBindCustomerSale_Read([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, SALES, (col)=> { if (col.Binding == "Country") { return CustomerSale.NAMEDCOUNTRIES; } if (col.Binding == "Product") { return CustomerSale.PRODUCTS; } if (col.Binding == "Color") { return CustomerSale.COLORS; } if (col.Binding == "Rank") { return CustomerSale.RANKS; } return null; })); } 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.Active = sale.Active; fSale.Amount = sale.Amount; fSale.Color = sale.Color; fSale.Country = sale.Country; fSale.Discount = sale.Discount; fSale.End = sale.End; fSale.Amount2 = sale.Amount2; fSale.Start = sale.Start; fSale.Product = sale.Product; fSale.Rank = sale.Rank; return new CollectionViewItemResult<Sale> { Error = error, Success = success && ModelState.IsValid, Data = fSale }; }, () => SALES)); } } }
DataMap.cshtml
@using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ List<CustomerSale.NamedCountry> countries = ViewBag.Countries; List<CustomerSale.NamedProduct> products = ViewBag.Products; List<NamedColor> colors = ViewBag.Colors; List<CustomerSale.NamedRank> ranks = ViewBag.Ranks; List<FullCountry> fullCountries = ViewBag.FullCountries; List<CitySale> cities = ViewBag.Cities; IEnumerable<CitySale> citiesSales = ViewBag.CitiesSales; ViewBag.DemoDescription = false; } <h3> @Html.Raw(Resources.FlexGrid.DataMap_DataMap) </h3> <p> @Html.Raw(Resources.FlexGrid.DataMap_Text0) @Html.Raw(Resources.FlexGrid.DataMap_Text1) </p> @(Html.C1().FlexGrid<Sale>() .Id("ovFlexGrid") .AutoGenerateColumns(false) .Bind(bl => bl.Bind(Url.Action("RemoteBindCustomerSale_Read")).Update(Url.Action("ProductsUpdate"))) .CssClass("grid") .IsReadOnly(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID").Visible(false)); bl.Add(cb => cb.Binding("Start").Format("MMM d yy")); bl.Add(cb => cb.Binding("End").Format("HH:mm")); bl.Add(cb => cb.Binding("Country").DataMapEditor(DataMapEditor.AutoComplete) .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Name") .SortByDisplayValues(true) .Bind(countries))); bl.Add(cb => cb.Binding("Product").DataMapEditor(DataMapEditor.DropDownList) .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Id") .SortByDisplayValues(true) .Bind(products))); bl.Add(cb => cb.Binding("Color").DataMapEditor(DataMapEditor.DropDownList) .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Value") .SortByDisplayValues(true) .Bind(colors))); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Amount2").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); bl.Add(cb => cb.Binding("Rank").Width("250").Align("center").DataMapEditor(DataMapEditor.RadioButtons) .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Name") .SortByDisplayValues(true) .Bind(ranks))); }) ) <h4> @Html.Raw(Resources.FlexGrid.DataMap_MultiColumnDataMap) </h4> <p>@Html.Raw(Resources.FlexGrid.DataMap_Text2)</p> <p>@Html.Raw(Resources.FlexGrid.DataMap_Text3)</p> @(Html.C1().FlexGrid<Sale>() .Id("multiColumns") .AutoGenerateColumns(false) .Bind(bl => bl.InitialItemsCount(100).Bind(Model).Update(Url.Action("ProductsUpdate"))) .CssClass("grid") .IsReadOnly(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID").Visible(false)); bl.Add(cb => cb.Binding("Start").Format("MMM d yy")); bl.Add(cb => cb.Binding("End").Format("HH:mm")); bl.Add(cb => cb.Binding("Country")); bl.Add(cb => cb.Binding("Product") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Id") .SortByDisplayValues(true) .Bind(products))); bl.Add(cb => cb.Binding("Color") .DropDownCssClass("multi-column") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Value") .SortByDisplayValues(true) .Bind(colors))); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Amount2").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) ) <h4> @Html.Raw(Resources.FlexGrid.DataMap_DynamicDataMap) </h4> <p>@Html.Raw(Resources.FlexGrid.DataMap_Text6)</p> <p>@Html.Raw(Resources.FlexGrid.DataMap_Text7)</p> @(Html.C1().FlexGrid<CitySale>() .Id("gridDynamicDataMap") .AutoGenerateColumns(false) .Bind(citiesSales) .CssClass("grid") .IsReadOnly(false) .Columns(bl => { bl.Add(cb => cb.Binding("Country") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Id") .SortByDisplayValues(true) .Bind(fullCountries))); bl.Add(cb => cb.Binding("Id").Header("City") .DataMap(dm => dm.DisplayMemberPath("Name") .SelectedValuePath("Id") .SortByDisplayValues(true) .Bind(cities))); bl.Add(cb => cb.Binding("Sales").Format("c")); bl.Add(cb => cb.Binding("Expenses").Format("c")); }) ) @section Scripts{ <script> c1.documentReady(function () { var grid = wijmo.Control.getControl('#gridDynamicDataMap'), cityCol = grid.columns.getColumn("Id"), cities = @Html.Raw(Json.Encode(cities)), cityMap = cityCol.dataMap; // Override cityMap's getDisplayValues method to get only cities belong to the current item's country cityMap.getDisplayValues = function (dataItem) { var validCities = cities.filter(function (city) { return city.Country == dataItem.Country; }); return validCities.map(function (city) { return city.Name; }); }; }); </script> } <style> .wj-radio-map label { padding: 0 0 0 0; } </style>
マニュアル