FlexGrid を使用すると、列を列バンドと呼ばれる論理グループに編成できます。これを使用してバンド グリッド ビューを作成できます。このビューでは、列がバンドに配置された表形式でデータが表示されます。バンドビューを使用すると、グリッド内の膨大な量のデータを簡単に表現できます。たとえば、製品の注文と配送の詳細をグリッドに表示するとします。この場合、バンド ビューを作成してデータを階層構造に整理し、簡単に管理できます。

FlexGrid の列バンド機能は、C1.Win.FlexGrid.BandedView アセンブリの C1.Win.FlexGrid 名前空間の C1FlexGridBandedView クラスを使用します。 ユーザーは、NuGet パッケージ マネージャーを使用して C1.Win.FlexGrid.BandedView NuGet パッケージを追加できます。これにより、ソリューション エクスプローラーの [依存関係] セクションに NuGet パッケージが追加されます。 デザイン ビューに切り替えると、ツールボックスに FlexGridBandedView コンポーネントが表示されます。これをデザイナーに追加すると、コンポーネントトレイに追加されます。

スマートタグパネル を使用して FlexGridBandedView を構成する

このセクションでは、.NET および .NET Framework で C1FlexGridBandedView タスク スマート タグ パネルを使用して、FlexGrid コントロールでバンド ビューを設定する方法を紹介します。

プロパティウィンドウで FlexGridBandedView を構成する

プロパティ ウィンドウで FlexGridBandedView コンポーネントのプロパティを確認すると、FlexGrid プロパティが表示されます。このプロパティを使用して、好みの FlexGrid コントロールをコンポーネントに割り当てることができます。

コードを使用して FlexGridBandedView を構成する

以下に示すように、コード ビハインドで FlexGrid プロパティを設定することもできます。

// FlexGridコントロールを割り当てます
c1FlexGridBandedView1.FlexGrid = flexGrid1;

バンド ビューは、列をバンドに配置することによって形成され、2 つ以上の個々の列のコレクションが共通のヘッダーの下に配置されます。 FlexGrid では、バンド ビューの概念は MergedRanges と FixedRows を使用して実装されます。 列をそれぞれのバンドに割り当てることで、バンドビューを作成できます。 このセクションには、バンド付きの列とそれらに対して実行できる操作に関する情報が含まれています。

列バンドの作成

C1FlexGridBandedView クラスの Bands プロパティと BandCollection クラスの Add() メソッドを使用して、バンドを作成できます。 BandCollection クラスの AddRange( )メソッドを使用して、列の範囲を追加することもできます。

次のサンプルコードは、バンドに列を追加する方法を示しています。

var bands = c1FlexGridBandedView1.Bands;
var band1 = bands.Add("Order");

ヘッダーバンド

ヘッダー バンドは、論理的にグループ化された列のヘッダーを表示します。 ヘッダー バンドには、任意の数のバンド列を割り当てることができます。 ヘッダー バンドでは次のプロパティを設定できます。

• ヘッダー テキストの設定: ヘッダー バンドに名前を付けるには、Band クラスの Caption プロパティを使用します。
• RowSpan の設定: Band Band クラスの RowSpan プロパティを使用します。
• ColSpan の設定: Band が占有する列の最大数を設定するには、Band クラスの ColSpan プロパティを使用します。
• 可視性の設定: ヘッダー バンドを可視にするには、Band クラスの Visible プロパティを true に設定します。 同様に、Visible プロパティを false に設定してヘッダー バンドを非表示にすることもできます。
• 展開/折りたたみ: バンドを水平方向に折りたたむには、Band クラスの CollapseTo プロパティを使用できます。 CollapseTo 列が使用できない (つまり、非表示または移動された) 場合、列はバンド内の最初の使用可能な列に折りたたまれます。 設計時にバンドを折りたたむためにコンテキスト メニューを使用することもできます。 一方、Band クラスの Visible プロパティを false に設定して、バンドを垂直方向に折りたたむことができます。
  
  

次のサンプルコードは、これらのプロパティの使用法を示しています。

var bands = c1FlexGridBandedView1.Bands;
var band1 = bands.Add("Order");
band1.Children.Add("OrderID");
band1.Children.Add("OrderDate");
band1.CollapseTo = "OrderDate";
band1.Caption = "Order1";
band1.RowSpan = 2;
band1.ColSpan = 2;
band1.Visible = true;

さらに、実行時にユーザーはボタンを使用してヘッダーを垂直方向に折りたたむことができます。

マルチレベルバンドの作成

FlexGrid を使用すると、複数のバンドを積み重ねるか、または、複数の子バンドを親バンドに追加することで、マルチレベル バンドを作成できます。 マルチレベル バンドでは、行のスパンは Band のレベルの増加に伴って増加し、最高レベルの Band が数行分拡張されます (RowSpan がゼロの場合)。 マルチレベル バンドの最下位バンドは、グリッド列に対応し、子バンドを含まないバンド列です。 親バンドの Children Collection に子バンドを追加することで、マルチレベル バンドを作成できます。 これを行うには、Band クラスの Children プロパティを使用できます。

次のサンプルコードは、マルチレベルバンドを作成する方法を示しています。

band5.Caption = "Engine";           
band6.Caption = "HP";
band6.Name = "HP";
band7.Caption = "Liter";
band7.Name = "Liter";
band8.Caption = "Cyl";
band8.Name = "Cyl";
band5.Children.Add(band6);
band5.Children.Add(band7);
band5.Children.Add(band8);

バンド ビューのカスタマイズ

バンド ビューでは、バンドの外側の列はバンドの後に配置されます。 この表示は、Band クラスの BandsColumnsRelation プロパティを使用して変更できます。 BandsColumnsRelation プロパティは、BandsColumnsRelation 列挙体を使用して、次のいずれかの値を設定することにより、バンド レイアウトのバンドと列の位置を変更します。

• Default: バンドの後に列を表示します。これはデフォルト値です。
• Bands: バンドのみを表示します。
• BandsBeforeColumns: バンドの後に列を表示します。
• ColumnBeforeBands: バンドの前に列を表示します。

次のサンプルコードは、バンド列の列レイアウトを変更する方法を示しています。

c1FlexGridBandedView1.BandsColumnsRelation = BandsColumnsRelation.Bands;

高度な列バンド

FlexGridBandedView は、Band 設定 (RowSpan および ColSpan プロパティ) に応じて、高度なバンド ビューを使用できます。高度なバンド ビュー では、バンドが複数の行に表示されます。 複雑なセル レイアウトがサポートされているため、見やすくなっています。 このビューでは、グリッド キャプションがヘッダー バンドとレコード バンドの 2 つのセクションに分かれています。 ここで、ヘッダー バンドは論理的にグループ化された列のヘッダーを表し、レコード バンドは特定の列にリンクされた列の論理グループを表します。 詳細バンド ビューでは、バンドは複数の行と列を占めることができます。 Band クラスの RowSpan プロパティを使用して、このビューでバンドが占有する最小行数を設定し、Band クラスの ColSpan プロパティを使用して、バンドが占有する最大列数を設定できます。

次のサンプルコードは、高度なバンド ビューの設定を示しています。

var bands = c1FlexGridBandedView1.Bands;
bands.Add("OrderID");
var bMain = bands.Add("Ship");
bMain.ColSpan = 3;
bMain.Children.Add("ShipVia");
bMain.Children.Add("ShippedDate");
bMain.Children.Add("ShipName");
var bDescription = bMain.Children.Add("ShipAddress");            
bDescription.ColSpan = 3;
bDescription.RowSpan = 3;        
bands.Add("CustomerID");
bands.Add("EmployeeID");
bands.Add("OrderDate");