サンプル

概要

概要

サンプル

設定

このビューでは、1レコードを2行で表示します。 レイアウトは、注文情報、顧客情報、荷主情報の3つのグループに分かれています。

説明

MultiRowコントロールは、従来のグリッドレイアウトを拡張し、複数の行を使用して各データ項目を表現します。

MultiRowコントロールでは、従来のグリッドのように表形式でデータを表示して編集できます。 従来のグリッドと異なるのは、MultiRowは各データ項目を複数の行にまとめて、最小限の水平スクロールで多数の列を表示できるフォーム状のインタフェースを作成できることです。

MultiRowコントロールはFlexGridコントロールの拡張コントロールです。FlexGridの使用方法を知っていれば、すぐにMultiRowを使用できます。 新しい重要なプロパティは、グリッド行とセルのレイアウトを記述するLayoutDefinitionオブジェクトです。

MultiRowコントロールは、単に従来のグリッドの代わりに使用されるだけでなく、ある種の用途にぴったり合う特殊ツールです。

レイアウト定義

LayoutDefinitionプロパティはグリッド内のセルのレイアウトを指定します。 このプロパティには、セルグループオブジェクトの配列が含まれます。 各セルグループは、グループが占める列の数と、各グループを構成するセルを指定します。

次の図は、セルグループがどのように解釈されてグリッドレイアウトになるかを示します。

このグループの幅はグリッド列3つ分です。その中に、さまざまな幅を持つ6つのセルが含まれます。 レイアウトの生成時、グリッドは各行にできるだけ多くのセルを入れ、グループ幅に達すると次の行の先頭にセルを配置します。 各行の最後のセルは、グループのColspan全体に自動的に拡大されます。 この処理は、テキストの行を折り返して段落を作成する方法に似ています。

同じ処理がLayoutDefinitionオブジェクト内のすべてのグループに適用されます。

using C1.Web.Mvc.Fluent;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc.MultiRow;
using C1.Web.Mvc.MultiRow.Fluent;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MultiRowExplorer.Models
{
    public class LayoutDefinitionsBuilders
    {
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine
        {
            get
            {
                return ld =>
                {
                    ld.Add().Colspan(15).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone"))
                            .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }

        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150"))
                            .Add(cell => cell.Binding("Date").Header("Ordered").Width("150"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true)
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"));
                    });
                    ld.Add().Header("Shipper").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }

        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2))
                            .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"));
                    });
                    ld.Add().Header("Shipper").Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }

        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales
        {
            get
            {
                return ld =>
                {
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("ID").Header("ID"));
                        cells.Add(cell => cell.Binding("Active").Header("Active"));
                    });
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Start").Header("Start"));
                        cells.Add(cell => cell.Binding("End").Header("End"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2));
                        cells.Add(cell => cell.Binding("Product").Header("Product"));
                        cells.Add(cell => cell.Binding("Color").Header("Color"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Amount").Header("Amount"));
                        cells.Add(cell => cell.Binding("Amount2").Header("Amount2"));
                        cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2));
                    });
                };
            }
        }
    }
}
using System.Web.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _options = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Layout Definition",new OptionItem{Values = new List<string> {"Traditional", "Compact", "Detailed"},CurrentValue = "Compact"}}
            }
        };

        public ActionResult Index(FormCollection collection)
        {
            _options.LoadPostData(collection);
            var model = Orders.GetOrders();
            ViewBag.DemoOptions = _options;
            return View(model);
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;

    var layoutDefinition = optionsModel.Options["Layout Definition"].CurrentValue;
    Action<ListItemFactory<CellGroup, CellGroupBuilder>> layoutDefinitionBuilder;
    if (layoutDefinition == "Traditional")
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.OneLine;
    }
    else if (layoutDefinition == "Compact")
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.TwoLines;
    }
    else
    {
        layoutDefinitionBuilder = LayoutDefinitionsBuilders.ThreeLines;
    }
}

@(Html.C1().MultiRow<Orders.Order>()
    .Id("ovMultiRow")
    .Bind(bl => bl.Bind(Model).DisableServerRead(true))
    .CssClass("multirow")
    .LayoutDefinition(layoutDefinitionBuilder)
)
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
    @if (layoutDefinition == "Traditional")
    {
        <p>従来のグリッドのように、1レコードを1行で表示します。ユーザーはレコード全体を見るには水平方向にスクロールする必要があります。</p>
    }
    @if (layoutDefinition == "Compact")
    {
        <p>このビューでは、1レコードを2行で表示します。 レイアウトは、注文情報、顧客情報、荷主情報の3つのグループに分かれています。</p>
    }
    @if (layoutDefinition == "Detailed")
    {
        <p>このビューでは、1レコードを3行で表示します。 レイアウトは、注文情報、顧客情報、荷主情報の3つのグループに分かれています。</p>
    }
}

@section Summary{
    <p>The MultiRow control extends conventional grid layouts by using multiple rows to represent each data item.</p>
}

@section Description{
    <p>
        <b>MultiRow</b>コントロールは、従来のグリッドレイアウトを拡張し、複数の行を使用して各データ項目を表現します。
    </p><p>
        <b>MultiRow</b>コントロールでは、従来のグリッドのように表形式でデータを表示して編集できます。
        従来のグリッドと異なるのは、<b>MultiRow</b>は各データ項目を複数の行にまとめて、最小限の水平スクロールで多数の列を表示できるフォーム状のインタフェースを作成できることです。
    </p><p>
        <b>MultiRow</b>コントロールは<b>FlexGrid</b>コントロールの拡張コントロールです。<b>FlexGrid</b>の使用方法を知っていれば、すぐに<b>MultiRow</b>を使用できます。
        新しい重要なプロパティは、グリッド行とセルのレイアウトを記述する<b>LayoutDefinition</b>オブジェクトです。
    </p><p>
        <b>MultiRow</b>コントロールは、単に従来のグリッドの代わりに使用されるだけでなく、ある種の用途にぴったり合う特殊ツールです。
    </p>
    <h3 class="semi-bold">レイアウト定義</h3>
    <p>
        <b>LayoutDefinition</b>プロパティはグリッド内のセルのレイアウトを指定します。
        このプロパティには、セルグループオブジェクトの配列が含まれます。 各セルグループは、グループが占める列の数と、各グループを構成するセルを指定します。
    </p><p>
        次の図は、セルグループがどのように解釈されてグリッドレイアウトになるかを示します。
        <img src="~/Content/images/cellGroup.png" />
    </p><p>
        このグループの幅はグリッド列3つ分です。その中に、さまざまな幅を持つ6つのセルが含まれます。
        レイアウトの生成時、グリッドは各行にできるだけ多くのセルを入れ、グループ幅に達すると次の行の先頭にセルを配置します。
        各行の最後のセルは、グループの<b>Colspan</b>全体に自動的に拡大されます。
        この処理は、テキストの行を折り返して段落を作成する方法に似ています。
    </p><p>
        同じ処理が<b>LayoutDefinition</b>オブジェクト内のすべてのグループに適用されます。
    </p>
}