マージ

FlexGrid は、同じコンテンツを含むセルのマージをサポートします。セルのマージを有効にするには、AllowMerging プロパティを設定して、グリッドのどの部分をマージするかを指定します。AllowMerging プロパティは、特定の行および列オブジェクトに対して設定できます。使用可能な値には、None、Cells、ColumnHeaders、RowHeaders、AllHeaders、および All があります。

AllowMerging プロパティをこれらのいずれかの値に設定すると、FlexGrid のセルが自動的にマージされ、データが視覚的にグループ化されます。

次の図は、AllowMerging プロパティを Cells にを設定した後の FlexGrid を示しています。この例では、「クイックスタート」でアプリケーションに追加した Sale.cs モデルを使用します。

次のコード例は、FlexGrid でマージを有効にする方法を示します。

コードの場合

MergingController.cs

C#	コードのコピー
public ActionResult Index() { return View(Sale.GetData(15)); }

Merging.cshtml

HTML	コードのコピー
@using TagFlexGrid.Models @using C1.Web.Mvc.Grid @model IEnumerable<Sale> <c1-flex-grid auto-generate-columns="false" allow-merging="@AllowMerging.Cells" is-read-only="true" class="grid"> <c1-flex-grid-column binding="ID" width="80"></c1-flex-grid-column> <c1-flex-grid-column binding="国名"></c1-flex-grid-column> <c1-flex-grid-column binding="製品名" allow-merging="true"></c1-flex-grid-column> <c1-flex-grid-column binding="色" allow-merging="true"></c1-flex-grid-column> <c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="割引" width="100" format="p0"></c1-flex-grid-column> <c1-items-source source-collection="@Model"></c1-items-source> </c1-flex-grid>

HTML

コードのコピー

@using TagFlexGrid.Models
@using C1.Web.Mvc.Grid

@model IEnumerable<Sale>


<c1-flex-grid auto-generate-columns="false" allow-merging="@AllowMerging.Cells"
              is-read-only="true" class="grid">
    <c1-flex-grid-column binding="ID" width="80"></c1-flex-grid-column>
    <c1-flex-grid-column binding="国名"></c1-flex-grid-column>
    <c1-flex-grid-column binding="製品名" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="色" allow-merging="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="割引" width="100" format="p0"></c1-flex-grid-column>
    <c1-items-source source-collection="@Model"></c1-items-source>
</c1-flex-grid>