多彩な表現形式でデータをグリッド表示するASP.NETアプリケーションの作成

C1GridViewコントロールを使った高機能なWebアプリケーションの作成

グルーピング機能の設定

　グリッドデータの同じ項目を1つにまとめる「グループ化」や、同じ項目名のセルを1つのセルにまとめる「マージ」機能を組み込むと、表がぐっと見やすくなります。

　① グループ化をするには、C1GridViewコントロールの「ShowGroupArea」プロパティを「True」にします。プロパティの変更はプロパティウィンドウで行います。このプロパティを「True」にすると、グリッドの最上部にグループ化する列をドラッグ＆ドロップするエリアが表示されます。

　「AllowColMoving」プロパティを「True」にしておくと、アプリケーション実行時にグループ化したい列名をこのエリアにドラッグ＆ドロップするだけで、列のグループ化が可能です。

　また、グループ名の三角マークをクリックすることで、グループを縮小・展開することができます。

列「地方名」をグループ化エリアにドラッグ＆ドロップ

データを列「地方名」でグループ化する

展開／縮小アイコンをクリックするとグループを縮小・展開できる

　② データのグループ化はできましたが、このままでは同じ項目名が並んで表が見づらいですね。そこで今度は、同じデータのセルを結合して表を見やすくしていきます。

　この機能は、列ごとに設定する「RowMerge」プロパティを使用します。プロパティビルダーを起動し、結合したいデータのある列の「RowMerge」プロパティを「Free」にします。これで、設定した列の同じデータは1つのセルにまとめられます。

列「都道府県」の「RowMerge」プロパティを「Free」にした

グリッドの列「都道府県」にある同じデータが1つのセルにマージされる

　③ また、コードからセルのマージを行うことができます。ここでは、CheckBoxコントロールを配置し、チェックボックスのオン/オフで列「都道府県」と「地方名」のセルのマージの設定・解除を行うようにしてみます。

　コードからセルのマージを設定するには、C1GridViewクラスのRowMergeプロパティを設定します。このプロパティにアクセスするには、Columnsプロパティでセルをマージしたい列を指定し、その列のRowMergeプロパティをTrueにします。

　なお、CheckBoxコントロールの動作を反映するために、CheckBoxコントロールのAutoPostBackプロパティをTrueにしておきます。

「都道府県」と「地方名」のセルをマージし、列「地方名」でグループ化した

Visual Basic

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs) Handles CheckBox1.CheckedChanged
        If CheckBox1.Checked = True Then
            CType(C1GridView1.Columns(1), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge _
                = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free
            CType(C1GridView1.Columns(2), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge _
                = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free
        Else
            CType(C1GridView1.Columns(1), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge _
                = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None
            CType(C1GridView1.Columns(2), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge _
                = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None
        End If
    End Sub
End Class

C#

namespace GridView_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (CheckBox1.Checked == true)
            {
                ((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[1]).RowMerge =
                    C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free;
                ((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[2]).RowMerge =
                    C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free;
            }
            else
            {
                ((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[1]).RowMerge =
                    C1.Web.Wijmo.Controls.C1GridView.RowMerge.None;
                ((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[2]).RowMerge =
                    C1.Web.Wijmo.Controls.C1GridView.RowMerge.None;
            }
        }
    }
}