Features

Data Map

Data Map

This sample shows the data map feature which provides the MultiRow with automatic look up capabilities.

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 show drop-down buttons that can be used for quick editing. If you do not want to show the drop-down buttons, set the column's ShowDropDown property to false.

Multi-column Data Map

The MultiRow 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.Linq;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc;
using MultiRowExplorer.Models;
using System.Collections.Generic;
using C1.Web.Mvc.Serialization;


namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public static List<Sale> SALES = CustomerSale.GetData(100).ToList();
        public ActionResult DataMap()
        {
            ViewBag.Products = CustomerSale.PRODUCTS;
            ViewBag.Colors = CustomerSale.COLORS;
            return View(SALES);
        }

        public ActionResult RemoteBindCustomerSale_Read([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, SALES, (col) =>
            {
                var cell = col as C1.Web.Mvc.MultiRow.CellInfo;

                if (cell.Binding == "Product")
                {
                    return CustomerSale.PRODUCTS;
                }

                if (cell.Binding == "Color")
                {
                    return CustomerSale.COLORS;
                }

                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;
                return new CollectionViewItemResult<Sale>
                {
                    Error = error,
                    Success = success && ModelState.IsValid,
                    Data = fSale
                };
            }, () => SALES));
        }

    }
}

@using C1.Web.Mvc.Grid

@model IEnumerable<Sale>
@{
    List<CustomerSale.NamedProduct> products = ViewBag.Products;
    List<NamedColor> colors = ViewBag.Colors;
    ViewBag.DemoDescription = false;
}
<h3>
    @Html.Raw(MultiRowRes.DataMap_Text4)
</h3>
<p>@Html.Raw(MultiRowRes.DataMap_Text0)</p>

<c1-multi-row id="dmMultiRow" class="multirow" is-read-only="false">
    <c1-items-source read-action-url="RemoteBindCustomerSale_Read" update-action-url="ProductsUpdate"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID" is-read-only="true"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End" format="HH:mm"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell 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-multi-row-cell>
        <c1-multi-row-cell binding="Color">
            <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-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount" format="c"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2" format="c"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" format="p0" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

<h4>
    @Html.Raw(MultiRowRes.DataMap_Text5)
</h4>
<p>@Html.Raw(MultiRowRes.DataMap_Text2)</p>

<p>@Html.Raw(MultiRowRes.DataMap_Text3)</p>

<c1-multi-row id="dmMultiColumns" class="multirow" is-read-only="false">
    <c1-items-source initial-items-count="100" read-action-url="RemoteBindCustomerSale_Read" update-action-url="ProductsUpdate"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID" is-read-only="true"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End" format="HH:mm"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell 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-multi-row-cell>
        <c1-multi-row-cell 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-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount" format="c"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2" format="c"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" format="p0" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Summary{
    @Html.Raw(MultiRowRes.DataMap_Text6)
}