ReoGridは、カスタムセルタイプを作成する方法としてセルボディ機能を提供しています。ユーザーフレンドリーなカスタムドロップダウンセルを作成する機能を提供するDropdownCellという組み込みセルボディタイプがあります。組み込みセルタイプについて詳しくはこちらを参照してください。
カスタムドロップダウンセルを作成するには、unvell.ReoGrid.CellTypes名前空間に含まれるDropdownCellクラスを継承する独自のクラスを作成します。
ドロップダウンインターフェース
DropdownCellクラスは、ユーザーカスタマイズのドロップダウンセルを作成する最もシンプルな方法を提供します。セルの右側に矢印ボタンを表示し、ドロップダウンパネルの表示・非表示のユーザーアクションに応答します。
DropdownCellクラスを使用する場合、以下のことだけを行う必要があります。
- ドロップダウンパネルにコントロールを設定する
- コントロールから選択された項目をセルのデータとして設定する
DropdownCellは、ドロップダウンパネル内に表示されるコントロールを指定するためのDropdownControlというプロパティを提供しています。
ドロップダウンListViewの作成
この例では、標準の.NET ListViewコントロールを表示するドロップダウンセルの作成方法を示します。ListViewDropdownCellという名前のクラスを作成し、DropdownCellクラスを継承させます。
class ListViewDropdownCell : DropdownCell
{
private ListView listView;
public ListViewDropdownCell()
{
// Initial code goes here
}
}
コンストラクタでListViewを初期化し、DropdownControlプロパティに割り当てます。
public ListViewDropdownCell()
{
// initialize listview
this.listView = new ListView()
{
BorderStyle = System.Windows.Forms.BorderStyle.None,
View = View.Details,
FullRowSelect = true,
};
// set listview as drop-down control
this.DropdownControl = this.listView;
}
以下のコードを使用して、このListViewDropdownCellインスタンスをReoGridワークシートに追加します。
worksheet["B2"] = new ListViewDropdownCell();
注意: セルインスタンスの
Bodyプロパティを使用してセルボディオブジェクトを変更することもできます。Bodyプロパティをnullに設定すると、セルからセルボディが削除されます。 プログラムを実行してドロップダウンボタンをクリックすると、ListViewコントロールを含む空のパネルが表示されます。
リストビューに選択項目を表示するには、以下のコードでアイテムを追加します。
// add listview columns
this.listView.Columns.Add("Column 1", 120);
this.listView.Columns.Add("Column 2", 120);
// add groups and items
var group1 = listView.Groups.Add("grp1", "Group 1");
listView.Items.Add(new ListViewItem(new string[] { "Item 1.1", "Subitem 1.1" }) { Group = group1 });
listView.Items.Add(new ListViewItem(new string[] { "Item 1.2", "Subitem 1.2" }) { Group = group1 });
listView.Items.Add(new ListViewItem(new string[] { "Item 1.3", "Subitem 1.3" }) { Group = group1 });
var group2 = listView.Groups.Add("grp2", "Group 2");
listView.Items.Add(new ListViewItem(new string[] { "Item 2.1", "Subitem 2.1" }) { Group = group2 });
listView.Items.Add(new ListViewItem(new string[] { "Item 2.2", "Subitem 2.2" }) { Group = group2 });
listView.Items.Add(new ListViewItem(new string[] { "Item 2.3", "Subitem 2.3" }) { Group = group2 });
プログラムを再度実行します：
ご覧の通り、プレースホルダーアイテムを含むListViewコントロールが表示されますが、ドロップダウンパネルが狭すぎます。これを修正するには、DropdownCellインスタンスのMinimumDropdownWidthプロパティを設定します。
// enlarge the dropdown panel
this.MinimumDropdownWidth = 300;
選択項目の受け取り
リストビューのClickイベントをハンドルして選択項目を設定します。
// add click event handler
this.listView.Click += listView_Click;
Event handler:
void listView_Click(object sender, EventArgs e)
{
if (this.listView.SelectedItems.Count > 0)
{
// set first selected item as cell's data
this.Cell.Data = this.listView.SelectedItems[0].Text;
this.PullUp(); // pull up the drop-down panel to finish editing
}
}
プログラムを実行してドロップダウンリストからアイテムを選択すると、選択されたアイテムがセル内に表示されます。
最後に、ドロップダウンセルに罫線と初期テキストを設定します。
worksheet["B2"] = "Choose...";
worksheet["B2"] = new ListViewDropdownCell();
worksheet.Ranges["B2"].BorderOutline = BorderStyle.GraySolid;
最終結果
編集前：
アイテムの選択：
編集後：
完全なソースコードとデモは、ダウンロードページのリリースパッケージに含まれるデモプロジェクトで利用できます。
ドロップダウンセル内のスプレッドシート
エンドユーザーがサブスプレッドシートからコンテンツを選択できる機能を実装したい場合は、ドロップダウンパネル内に別のReoGridインスタンスを配置することも検討できます。