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:
Dynamic Data Map
You can also use DataMap dynamically as filtering the values in the drop-down list if it depends on some conditions.
For example, the grid below shows a list of data items with countries and cities. The drop-down city list includes only cities in the data item's country.
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)); } } }
@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>