FlexGrid
Data Map
Features
Sample
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 c1-flex-grid-column tag has a drop-down-css-class attribue 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:
Source
DataMapController.cs
using System.Collections.Generic;
using System.Linq;
using C1.Web.Mvc.Serialization;
using C1.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace MvcExplorer.Controllers.FlexGrid
{
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,
Data = fSale
};
}, () => SALES));
}
}
}
DataMap.cshtml
@model IEnumerable<Sale>
@{
var countries = ViewBag.Countries;
var products = ViewBag.Products;
var colors = ViewBag.Colors;
var ranks = ViewBag.Ranks;
ViewBag.DemoDescription = false;
}
<h3>
@Html.Raw(FlexGridRes.DataMap_DataMap)
</h3>
<p>
@Html.Raw(FlexGridRes.DataMap_Text0)
@Html.Raw(FlexGridRes.DataMap_Text1)
@Html.Raw(FlexGridRes.DataMap_Text2)
</p>
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="false">
<c1-flex-grid-column binding="ID" is-visible="false"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.AutoComplete">
<c1-data-map display-member-path="Name" selected-value-path="Name" sort-by-display-values="true">
<c1-items-source source-collection="countries"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Product" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
<c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true">
<c1-items-source source-collection="products"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Color" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
<c1-data-map display-member-path="Name" selected-value-path="Value" sort-by-display-values="true">
<c1-items-source source-collection="colors"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
<c1-flex-grid-column binding="Rank" width="250" align="center" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.RadioButtons">
<c1-data-map display-member-path="Name" selected-value-path="Name" sort-by-display-values="true">
<c1-items-source source-collection="ranks"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-items-source read-action-url="RemoteBindCustomerSale_Read" update-action-url="ProductsUpdate"></c1-items-source>
</c1-flex-grid>
<p>@Html.Raw(FlexGridRes.DataMap_Text3)</p>
<h4>
@Html.Raw(FlexGridRes.DataMap_MultiColumnDataMap)
</h4>
<p>@Html.Raw(FlexGridRes.DataMap_Text4)</p>
<p>@Html.Raw(FlexGridRes.DataMap_Text5)</p>
<c1-flex-grid id="multiColumns" auto-generate-columns="false" class="grid" is-read-only="false">
<c1-flex-grid-column binding="ID" is-visible="false"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product">
<c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true">
<c1-items-source source-collection="products"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Color" drop-down-css-class="multi-column">
<c1-data-map display-member-path="Name" selected-value-path="Value" sort-by-display-values="true">
<c1-items-source source-collection="colors"></c1-items-source>
</c1-data-map>
</c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
<c1-items-source source-collection="Model" initial-items-count="100" update-action-url="ProductsUpdate"></c1-items-source>
</c1-flex-grid>
<style>
.wj-radio-map label {
padding: 0 0 0 0;
}
</style>
Documentation