Features

セルの固定

セルの固定

このビューは、MultiRowコントロールの固定セル機能を示します。

機能

設定

説明

MultiRowコントロールを使用すると、行や列を固定して、それらを常に表示したままグリッドをスクロールすることができます。
ExcelやFlexGridコントロールと同様に、固定されたセルも通常のセルとして編集したり選択することができます。

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

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult Freezing()
        {
            ViewBag.DemoSettings = true;
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateSettings()
            };
            return View();
        }

        public ActionResult Freezing_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }

        private static IDictionary<string, object[]> CreateSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"FrozenColumns", new object[]{1, 0, 2, 3}},
                {"FrozenRows", new object[]{2, 0, 1, 3, 4, 5}}
            };

            return settings;
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}

<c1-multi-row id="@demoSettingsModel.ControlId" is-read-only="true" class="multirow"
              frozen-columns="1" frozen-rows="2">
    <c1-items-source read-action-url="@Url.Action("Freezing_Bind")"></c1-items-source>
    <c1-multi-row-cell-group header="Order" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" />
        <c1-multi-row-cell binding="Date" header="Ordered" width="150" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Customer" colspan="3">
        <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="Shipper" colspan="2">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" colspan="2" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" width="200" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" width="100" />
    </c1-multi-row-cell-group>
</c1-multi-row>

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

}

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

}