CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/04/18 14:00
目次

グルーピング機能の設定

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

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

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

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

列「地方名」をグループ化エリアにドラッグ&ドロップ
列「地方名」をグループ化エリアにドラッグ&ドロップ
データを列「地方名」でグループ化する
データを列「地方名」でグループ化する
展開/縮小アイコンをクリックするとグループを縮小・展開できる
展開/縮小アイコンをクリックするとグループを縮小・展開できる

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

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

列「都道府県」の「RowMerge」プロパティを「Free」にした
列「都道府県」の「RowMerge」プロパティを「Free」にした
グリッドの列「都道府県」にある同じデータが1つのセルにマージされる
グリッドの列「都道府県」にある同じデータが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;
            }
        }
    }
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5