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 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>
    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.<br />
    Columns with an associated data map can be sorted by the mapped display value instead of the binding value.<br />
    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 <b>ShowDropDown</b> property to false.
</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));

        });
    })
)
<p>&nbsp;</p>
<h4>
    Multi-column Data Map
</h4>
<p>
    The columns of <b>MultiRow</b> control have a <b>DropDownCssClass</b> property that enables styling the drop-downs used to edit values in data-mapped columns.
</p>
<p>
    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:
</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{
    This sample demonstrates how to use data map feature, which provides the MultiRow control with automatic look up capabilities.
}