Features

概要

概要

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

機能

設定

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

説明

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

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

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

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

LayoutDefinition

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

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

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

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

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>@Html.Raw(Resources.MultiRowExplorer.Index_Text0)</p>
    }
    @if (layoutDefinition == "Compact")
    {
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text1)</p>
    }
    @if (layoutDefinition == "Detailed")
    {
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text2)</p>
    }
}

@section Summary{
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text3)</p>
}

@section Description{
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text4)</p>

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

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

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

<h3 class="semi-bold">@Html.Raw(Resources.MultiRowExplorer.Index_Text12)</h3>
<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text8)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Index_Text9)
    <img src="@Url.Content(Resources.MultiRowExplorer.Index_Text13)" />
</p>

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

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

}