FlexGrid

FlexGrid

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:

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.

Country

City

Sales

Expenses

Washington

$8,254.23

$3,676.99

Miami

$8,582.19

$3,398.75

Seattle

$6,248.66

$1,092.03

London

$8,953.62

$4,482.20

Oxford

$865.80

$4,192.90

Bath

$1,701.43

$3,220.58

Canada

Ottawa

$8,268.14

$1,095.94

Canada

Edmonton

$9,999.73

$2,406.83

Canada

Victoria

$6,522.05

$3,598.63

Japan

Tokyo

$8,094.63

$504.68

Japan

Sendai

$7,290.94

$3,592.25

Japan

Kobe

$1,255.27

$4,525.88

China

Beijing

$1,891.24

$2,384.05

China

Shanghai

$5,407.95

$1,627.50

France

Paris

$6,710.37

$2,341.99

France

Marseille

$8,334.97

$4,046.02

France

Lyon

$7,936.30

$3,822.53

German

Bonn

$9,375.40

$1,474.98

German

Munich

$5,227.85

$3,316.96

German

Berlin

$3,325.89

$1,433.61

Italy

Rome

$8,206.10

$1,112.59

Italy

Florence

$1,868.72

$342.59

Italy

Milan

$6,246.23

$3,465.23

Korea

Seoul

$6,303.94

$4,638.19

Korea

Incheon

$2,213.42

$4,643.54

Korea

Sejong

$665.22

$4,500.52

Australia

Melbourne

$6,785.05

$469.89

Australia

Sydney

$1,490.97

$534.86

DataMapController.cs DataMap.cshtml

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; 
            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, 
                    Data = fSale 
                }; 
            }, () => SALES)); 
        } 
  
    } 
} 

@using Newtonsoft.Json; 
@model IEnumerable<Sale> 
@{ 
    var countries = ViewBag.Countries; 
    var products = ViewBag.Products; 
    var colors = ViewBag.Colors; 
    var ranks = ViewBag.Ranks; 
    var fullCountries = ViewBag.FullCountries; 
    var cities = ViewBag.Cities; 
    var citiesSales = ViewBag.CitiesSales; 
    var jsonCities = JsonConvert.SerializeObject(cities, Formatting.Indented); 
    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> 
<h4> 
    @Html.Raw(FlexGridRes.DataMap_DynamicDataMap) 
</h4> 
<p>@Html.Raw(FlexGridRes.DataMap_Text6)</p> 
<p>@Html.Raw(FlexGridRes.DataMap_Text7)</p> 
<c1-flex-grid id="gridDynamicDataMap" auto-generate-columns="false" class="grid" is-read-only="false"> 
    <c1-flex-grid-column binding="Country"> 
        <c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true"> 
            <c1-items-source source-collection="fullCountries"></c1-items-source> 
        </c1-data-map> 
    </c1-flex-grid-column> 
    <c1-flex-grid-column binding="Id" header="City"> 
        <c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true"> 
            <c1-items-source source-collection="cities"></c1-items-source> 
        </c1-data-map> 
    </c1-flex-grid-column> 
    <c1-flex-grid-column binding="Sales" format="c"></c1-flex-grid-column> 
    <c1-flex-grid-column binding="Expenses" format="c"></c1-flex-grid-column> 
    <c1-items-source source-collection="citiesSales"></c1-items-source> 
</c1-flex-grid> 
  
@section Scripts{ 
    <script>
        c1.documentReady(function () { 
            var grid = wijmo.Control.getControl('#gridDynamicDataMap'), 
                cityCol = grid.columns.getColumn("Id"), 
                cities = @Html.Raw(jsonCities), 
                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>

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Data Map

Features

Data Map

Multi-column Data Map

Dynamic Data Map