ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Data Map / DataMap Editors
In This Topic
    DataMap Editors
    In This Topic

    DataMap have been an essential feature of the FlexGrid control. It provides FleGrid with automatic look up capabilities. When you assign a DataMap to a FlexGrid column, it performs the following:

    For example, let's say, you have a list of data items with a country field that contains the country name. If you bind that to a grid, users might type invalid or inconsistent information (say, "US" vs. "USA" vs. "United States"). This can be prevented by creating a data map containing a list of valid countries and assigning that list to the Grid's "Country" column.

    DataMap editor showing the use of all types of editors for editing data-mapped cells

    By default, FlexGrid provides a drop-down list for editing data-mapped cells. However, you can change the type of editor used for editing data-mapped cells or column using DataMapEditor property of the Column class. The DataMapEditor property allows you to select the type of editor by accepting values from the DataMapEditor enumeration, which are listed as follows:

    The following example demonstrates the use of all types of editor for different editing data-mapped columns.

    Add Model

    CustomerSale
    Copy Code 
    public class CustomerSale
{
    public static List<string> COUNTRIES = new List<string> { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
    public static List<NamedProduct> PRODUCTS = new List<NamedProduct> {
        new NamedProduct {Id = "1", Name = "Widget"},
        new NamedProduct {Id = "2", Name = "Gadget"},
        new NamedProduct {Id = "3", Name = "Doohickey"}
    };

    public static List<NamedColor> COLORS = new List<NamedColor> {
        new NamedColor {Name = "Black", Value = "#000000"},
        new NamedColor {Name = "White", Value = "#FFFFFF"},
        new NamedColor {Name = "Red", Value = "#FF0000"},
        new NamedColor {Name = "Green", Value = "#008000"},
        new NamedColor {Name = "Cyan", Value = "#00FFFF"},
        new NamedColor {Name = "DarkBlue", Value = "#0000A0"},
        new NamedColor {Name = "LightBlue", Value = "#ADD8E6"},
        new NamedColor {Name = "Purple", Value = "#800080"},
        new NamedColor {Name = "Yellow", Value = "#FFFF00"},
        new NamedColor {Name = "Lime", Value = "#00FF00"},
        new NamedColor {Name = "Magenta", Value = "#FF00FF"},
        new NamedColor {Name = "Olive", Value = "#808000"},
        new NamedColor {Name = "Maroon", Value = "#800000"},
        new NamedColor {Name = "Brown", Value = "#A52A2A"},
        new NamedColor {Name = "Orange", Value = "#FFA500"},
        new NamedColor {Name = "Gray", Value = "#808080"},
        new NamedColor {Name = "Silver", Value = "#C0C0C0"},
        new NamedColor {Name = "Night", Value = "#0C090A"},
        new NamedColor {Name = "Gunmetal", Value = "#2C3539"},
        new NamedColor {Name = "Midnight", Value = "#2B1B17"},
        new NamedColor {Name = "Charcoal", Value = "#34282C"},
        new NamedColor {Name = "Oil", Value = "#3B3131"},
        new NamedColor {Name = "Black Cat", Value = "#413839"},
        new NamedColor {Name = "Iridium", Value = "#3D3C3A"},
        new NamedColor {Name = "Columbia Blue", Value = "#87AFC7"},
        new NamedColor {Name = "Teal", Value = "#008080"},
        new NamedColor {Name = "Venom Green", Value = "#728C00"},
        new NamedColor {Name = "Blue", Value = "#0000FF"}
    };

    public static List<NamedCountry> NAMEDCOUNTRIES = COUNTRIES.Select(country =>
    {
        return new NamedCountry { Name = country };
    }).ToList();

    public static List<NamedRank> RANKS = Enumerable.Range(1, 5).Select(i =>
    {
        return new NamedRank { Name = i };
    }).ToList();

    public static IEnumerable<Sale> GetData(int total)
    {
        var colors = new[] { "Black", "White", "Red", "Green", "Blue" };

        var rand = new Random(0);
        var dt = DateTime.Now;
        var list = Enumerable.Range(0, total).Select(i =>
        {
            var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
            var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)].Id;
            var color = colors[rand.Next(0, colors.Length - 1)];

            return new Sale
            {
                ID = i + 1,
                Country = country,
                Product = product,
                Color = color,
                Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                Active = (i % 4 == 0),
                Rank = rand.Next(1, 6)
            };
        });
        return list;
    }

    public class NamedCountry
    {
        public string Name { get; set; }
    }

    public class NamedProduct
    {
        public string Id { get; set; }

        public string Name { get; set; }
    }

    public class NamedRank
    {
        public int Name { get; set; }
    }

}

public class NamedColor
{
    public string Name { get; set; }
    public string Value { get; set; }
}

    Add Controller

    DataMapEditorController.cs
    Copy Code 
    public static List<Sale> SALES = CustomerSale.GetData(100).ToList();
public IActionResult Index()
{
    ViewBag.Countries = CustomerSale.NAMEDCOUNTRIES;
    ViewBag.Products = CustomerSale.PRODUCTS;
    ViewBag.Colors = CustomerSale.COLORS;
    ViewBag.Ranks = CustomerSale.RANKS;
    return View(SALES);
}
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));
}

    Add View for the Controller

    Index.cshtml
    Copy Code 
    @using C1.Web.Mvc.Grid
@using ApplicationName.Models

@model IEnumerable<Sale>
@{
    List<CustomerSale.NamedCountry> countries = CustomerSale.NAMEDCOUNTRIES;
    List<CustomerSale.NamedProduct> products = CustomerSale.PRODUCTS;
    List<NamedColor> colors = CustomerSale.COLORS;
    List<CustomerSale.NamedRank> ranks = CustomerSale.RANKS;
}

<c1-flex-grid id="ovFlexGrid" class="grid" auto-generate-columns="false" is-read-only="false">
    <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.Menu">
        <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="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 source-collection="@Model" update-action-url="ProductsUpdate"></c1-items-source>
</c1-flex-grid>

<style>
    .wj-radio-map label {
        padding: 0 0 0 0;
    }
</style>