Features

Data Map

Data Map

This sample demonstrates how to use data map feature, which provides the MultiRow control with automatic look-up capabilities.

Features

Data Map

Data maps provide a grid with automatic look-up capabilities. For example, you may want to display a customer's name instead of his/her 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, in this sample, 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 columns of MultiRow control have a DropDownCssClass property that enables styling 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;
using System.Collections;
using System.Globalization;
using System.Linq;
using System.Web.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>
    Data Map
</h3>
<p>@Html.Raw(Resources.MultiRowExplorer.DataMap_Text0)</p>

@(Html.C1().MultiRow<Sale>()
        .Id("dmMultiRow")
        .Bind(bl => bl.Bind(Url.Action("RemoteBindCustomerSale_Read")).Update(Url.Action("ProductsUpdate")))
        .CssClass("multirow")
        .IsReadOnly(false)
        .LayoutDefinition(ld =>
        {
            ld.Add().Colspan(1).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("ID").IsReadOnly(true));
                bl.Add(cb => cb.Binding("Active"));

            });
            ld.Add().Colspan(1).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Start").Format("MMM d yy"));
                bl.Add(cb => cb.Binding("End").Format("HH:mm"));
            });
            ld.Add().Colspan(2).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Country").Colspan(2));
                bl.Add(cb => cb.Binding("Product")
                    .DataMap(dm => dm.DisplayMemberPath("Name")
                        .SelectedValuePath("Id")
                        .SortByDisplayValues(true)
                        .Bind(products)));
                bl.Add(cb => cb.Binding("Color")
                    .DataMap(dm => dm.DisplayMemberPath("Name")
                        .SelectedValuePath("Value")
                        .SortByDisplayValues(true)
                        .Bind(colors)));
            });
            ld.Add().Colspan(2).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Amount").Format("c"));
                bl.Add(cb => cb.Binding("Amount2").Format("c"));
                bl.Add(cb => cb.Binding("Discount").Format("p0").Colspan(2));

            });
        })
)

<h4>
    @Html.Raw(Resources.MultiRowExplorer.DataMap_Text1)
</h4>
<p>@Html.Raw(Resources.MultiRowExplorer.DataMap_Text2)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.DataMap_Text3)</p>

@(Html.C1().MultiRow<Sale>()
        .Id("dmMultiColumns")
        .Bind(bl => bl.InitialItemsCount(100).Bind(Model).Update(Url.Action("ProductsUpdate")))
        .CssClass("multirow")
        .IsReadOnly(false)
        .LayoutDefinition(ld =>
        {
            ld.Add().Colspan(1).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("ID").IsReadOnly(true));
                bl.Add(cb => cb.Binding("Active"));

            });
            ld.Add().Colspan(1).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Start").Format("MMM d yy"));
                bl.Add(cb => cb.Binding("End").Format("HH:mm"));
            });
            ld.Add().Colspan(2).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Country").Colspan(2));
                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)));
            });
            ld.Add().Colspan(2).Cells(bl =>
            {
                bl.Add(cb => cb.Binding("Amount").Format("c"));
                bl.Add(cb => cb.Binding("Amount2").Format("c"));
                bl.Add(cb => cb.Binding("Discount").Format("p0").Colspan(2));

            });
        })
)

@section Summary{
    @Html.Raw(Resources.MultiRowExplorer.DataMap_Text4)
}