マージ

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

Razor	コードのコピー
@(Html.C1().FlexGrid<Sale>() .AllowMerging(C1.Web.Mvc.Grid.AllowMerging.Cells) .AutoGenerateColumns(false) .IsReadOnly(true) .Bind(Model) .CssClass("grid") .Columns(columns => { columns.Add(column => column.Binding("ID").Width("80")); columns.Add(column => column.Binding("国名")); columns.Add(column => column.Binding("製品名").AllowMerging(true)); columns.Add(column => column.Binding("色").AllowMerging(true)); columns.Add(column => column.Binding("金額").Format("c,ja-jp")); columns.Add(column => column.Binding("割引").Width("100").Format("p0")); }) )

Razor

コードのコピー

@(Html.C1().FlexGrid<Sale>()
    .AllowMerging(C1.Web.Mvc.Grid.AllowMerging.Cells)
    .AutoGenerateColumns(false)
    .IsReadOnly(true)
    .Bind(Model)
    .CssClass("grid")
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID").Width("80"));
        columns.Add(column => column.Binding("国名"));
        columns.Add(column => column.Binding("製品名").AllowMerging(true));
        columns.Add(column => column.Binding("色").AllowMerging(true));
        columns.Add(column => column.Binding("金額").Format("c,ja-jp"));
        columns.Add(column => column.Binding("割引").Width("100").Format("p0"));
    })
)