Features

行ヘッダー

行ヘッダー

セルグループの IsRowHeader プロパティを使用すると、行ヘッダーセルとして表示されるグループを作成できます。

機能

設定

説明

"レイアウトは、顧客情報、注文情報、運送業者情報の3つのグループに分かれています。顧客情報は行ヘッダーグループです。 IsRowHeader プロパティをtrueに設定すると、セルのIsReadOnly プロパティが自動的にtrueに設定され(ヘッダーは編集できません)、 セルがヘッダーとしてスタイル設定されるようにセルの CssClass プロパティに'wj-header' スタイルが追加され、また、セルがヘッダーを連結されていない文字列として表示するように CellTemplate プロパティをその Header 値に設定します。 行ヘッダーセルに連結されている値を表示する場合は、 セルのHeaderではなく、Bindingプロパティを設定することができます。"

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;
using Microsoft.AspNetCore.Http;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _rowHeaderOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Row Header",new OptionItem{Values = new List<string> {"True", "False"}, CurrentValue = "True"}}
            }
        };

        // GET: GroupHeaders
        public ActionResult RowHeader(IFormCollection collection)
        {
            _rowHeaderOptions.LoadPostData(collection);
            ViewBag.RowHeaderOptions = _rowHeaderOptions;
            return View();
        }

        public ActionResult RowHeader_Read([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ControlOptions optionsModel = ViewBag.RowHeaderOptions;
    ViewBag.DemoSettings = true;
}

<c1-multi-row id="ovMultiRow" class="multirow">
    <c1-items-source read-action-url="@Url.Action("RowHeader_Read")"></c1-items-source>
    <c1-multi-row-cell-group header="Customer" colspan="3" is-row-header="@Convert.ToBoolean(optionsModel.Options["Row Header"].CurrentValue)">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" width="200" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
            <c1-data-map display-member-path="Value" selected-value-path="Value">
                <c1-items-source source-collection="cities" />
            </c1-data-map>
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Order" colspan="3">
        <c1-multi-row-cell binding="Id" header="ID" class="id" rowspan="2" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" rowspan="2" width="150" />
        <c1-multi-row-cell binding="Date" header="Ordered" width="150"  />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" width="150" />
    </c1-multi-row-cell-group>

    <c1-multi-row-cell-group header="Shipper" colspan="3">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="200" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" width="300" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" />
    </c1-multi-row-cell-group>
</c1-multi-row>


@section Settings{
    @await Html.PartialAsync("_OptionsMenu", optionsModel)
}

@section Summary{
    <p>@Html.Raw(MultiRowRes.RowHeader_Summary_Text0)</p>
}

@section Description{
    <p>@Html.Raw(MultiRowRes.RowHeader_Description_Text0)</p>


}