FlexGrid
Data Map
Features
Data Map
Data maps provide the grid with automatic look up capabilities. For example, you may want to display a customer name instead of his ID, or a color name instead of its RGB value.
Columns with an associated data map can be sorted by the mapped display value instead of the binding value.
Columns with an associated data map can be showed as AutoComplete, DropDownList or RadioButtons. You can choose these by setting DataMapEditor property.
Multi-column Data Map
The FlexGrid columns have a DropDownCssClass property that can be used to style the drop-downs used to edit values in data-mapped columns.
To see the multi-column editor in action, click one of the drop-down buttons in the "Color" column, or select a cell in that column and press F4:
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; 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)); } } }
@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; 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")); }) ) <style> .wj-radio-map label { padding: 0 0 0 0; } </style>