Features

データマップ

データマップ

このサンプルは、MultiRowに自動検索機能を提供するデータマップ機能を示します。

機能

データマップ

データマップは、グリッドに自動検索機能を提供します。たとえば、顧客のIDの代わりに顧客名、RGB値の代わりに色名を表示できます。

関連付けられたデータマップを持つ列は、連結値の代わりにマップされた表示値に基づいてソートすることができます。

関連付けられたデータマップを持つ列には、クイック編集に使用できるドロップダウンボタンが表示されます。ドロップダウンボタンを表示しない場合は、列のShowDropDownプロパティをfalseに設定します。

複数列のデータマップ

MultiRowの列にはDropDownCssClassプロパティがあり、これを使用して、
データマップ列の値の編集に使用できるドロップダウンのスタイルを設定できます。

複数列エディタの動作を確認するには、「Color」列のいずれかのドロップダウンボタンのをクリックするか、
この列内のセルを選択して[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>

<p>@Html.Raw(MultiRowRes.DataMap_Text1)</p>
<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)
}