FlexGrid

FlexGrid

データマップ

機能

サンプル

データマップ

データマップは、グリッドに自動検索機能を提供します。たとえば、顧客の ID の代わりに顧客名、RGB 値の代わりに色名を表示できます。
関連付けられたデータマップを持つ列は、連結値の代わりにマップされた表示値に基づいてソートすることができます。関連付けられたデータマップを持つ列は、AutoComplete、DropDownList、または RadioButtons として表示できます。これらのタイプを選択するには、DataMapEditorプロパティを設定します。

複数列のデータマップ

c1-flex-grid-column タグには drop-down-css-class 属性があり、これによってデータマップ列の値の編集に使用できるドロップダウンのスタイルを設定できます。

複数列エディタの実例を表示するには、「Color」の列でいずれかのドロップダウンボタンをクリックするか、その列でセルを選択して［F4］を押します。

動的なデータマップ

条件によっては、ドロップダウンに表示する値をフィルタリングするためにDataMapを動的に使用することもできます。

たとえば、下のグリッドは、国と都市を含むデータ項目のリストを示しています。ドロップダウン都市リストには、データ項目の国の都市のみが含まれます。

ソース

DataMapController.cs

using System.Collections.Generic;
using System.Linq;
using C1.Web.Mvc.Serialization;
using C1.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace MvcExplorer.Controllers.FlexGrid
{
    public partial class FlexGridController : Controller
    {
        public static List<Sale> SALES = CustomerSale.GetData(100).ToList();
        public ActionResult DataMap()
        {
            ViewBag.Countries = CustomerSale.NAMEDCOUNTRIES;
            ViewBag.Products = CustomerSale.PRODUCTS;
            ViewBag.Colors = CustomerSale.COLORS;
            ViewBag.Ranks = CustomerSale.RANKS;
            ViewBag.FullCountries = FullCountry.GetCountries();
            ViewBag.Cities = CitySale.GetCities();
            ViewBag.CitiesSales = CitySale.GetData(28);
            return View(SALES);
        }

        public ActionResult RemoteBindCustomerSale_Read([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, SALES, (col) =>
            {
                if (col.Binding == "Country")
                {
                    return CustomerSale.NAMEDCOUNTRIES;
                }

                if (col.Binding == "Product")
                {
                    return CustomerSale.PRODUCTS;
                }

                if (col.Binding == "Color")
                {
                    return CustomerSale.COLORS;
                }

                if (col.Binding == "Rank")
                {
                    return CustomerSale.RANKS;
                }

                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;
                fSale.Rank = sale.Rank;
                return new CollectionViewItemResult<Sale>
                {
                    Error = error,
                    Success = success,
                    Data = fSale
                };
            }, () => SALES));
        }

    }
}

DataMap.cshtml

@using Newtonsoft.Json;
@model IEnumerable<Sale>
@{
    var countries = ViewBag.Countries;
    var products = ViewBag.Products;
    var colors = ViewBag.Colors;
    var ranks = ViewBag.Ranks;
    var fullCountries = ViewBag.FullCountries;
    var cities = ViewBag.Cities;
    var citiesSales = ViewBag.CitiesSales;
    var jsonCities = JsonConvert.SerializeObject(cities, Formatting.Indented);
    ViewBag.DemoDescription = false;
}
<h3>
    @Html.Raw(FlexGridRes.DataMap_DataMap)
</h3>
<p>
    @Html.Raw(FlexGridRes.DataMap_Text0)
    @Html.Raw(FlexGridRes.DataMap_Text1)
    @Html.Raw(FlexGridRes.DataMap_Text2)
</p>
<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="false">
    <c1-flex-grid-column binding="ID" is-visible="false"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
    <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.DropDownList">
        <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="Amount2" 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 read-action-url="RemoteBindCustomerSale_Read" update-action-url="ProductsUpdate"></c1-items-source>
</c1-flex-grid>
<p>@Html.Raw(FlexGridRes.DataMap_Text3)</p>
<h4>
    @Html.Raw(FlexGridRes.DataMap_MultiColumnDataMap)
</h4>
<p>@Html.Raw(FlexGridRes.DataMap_Text4)</p>
<p>@Html.Raw(FlexGridRes.DataMap_Text5)</p>
<c1-flex-grid id="multiColumns" auto-generate-columns="false" class="grid" is-read-only="false">
    <c1-flex-grid-column binding="ID" is-visible="false"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column 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-flex-grid-column>
    <c1-flex-grid-column 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-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source source-collection="Model" initial-items-count="100" update-action-url="ProductsUpdate"></c1-items-source>
</c1-flex-grid>
<h4>
    @Html.Raw(FlexGridRes.DataMap_DynamicDataMap)
</h4>
<p>@Html.Raw(FlexGridRes.DataMap_Text6)</p>
<p>@Html.Raw(FlexGridRes.DataMap_Text7)</p>
<c1-flex-grid id="gridDynamicDataMap" auto-generate-columns="false" class="grid" is-read-only="false">
    <c1-flex-grid-column binding="Country">
        <c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true">
            <c1-items-source source-collection="fullCountries"></c1-items-source>
        </c1-data-map>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Id" header="City">
        <c1-data-map display-member-path="Name" selected-value-path="Id" sort-by-display-values="true">
            <c1-items-source source-collection="cities"></c1-items-source>
        </c1-data-map>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="Sales" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Expenses" format="c"></c1-flex-grid-column>
    <c1-items-source source-collection="citiesSales"></c1-items-source>
</c1-flex-grid>

@section Scripts{
    <script>
        c1.documentReady(function () {
            var grid = wijmo.Control.getControl('#gridDynamicDataMap'),
                cityCol = grid.columns.getColumn("Id"),
                cities = @Html.Raw(jsonCities),
                cityMap = cityCol.dataMap;

            // Override cityMap's getDisplayValues method to get only cities belong to the current item's country
            cityMap.getDisplayValues = function (dataItem) {
                var validCities = cities.filter(function (city) { return city.Country == dataItem.Country; });
                return validCities.map(function (city) { return city.Name; });
            };
        });
    </script>
}

<style>
    .wj-radio-map label {
        padding: 0 0 0 0;
    }
</style>

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）

データマップ

機能

データマップ

複数列のデータマップ

動的なデータマップ