DevExpress の ASPxGridLookup でのコンボボックス風の複数選択

DevExpress の ASPxGridLookup でのコンボボックス風の複数選択のサンプルです。

通常コンボボックスは単数選択のみです。
しかし、「ASPxGridLookup」を使用すればコンボボックス風の複数選択が可能です。
また動作はコンボボックスとほぼ同じです。

では、結果画面から見て下さい。
「神戸」、「松江」を選択しています。

↓

それではコンボボックス風の複数選択の手順を説明していきます。
現状の画面デザインはこのようになっています。

DB接続は「XPO」を使用していますので事前に「XPO」の作成が必要です。
「XPO」の作成方法は、過去ブログの「DevExpress のサンプル作成（ASPxGridLookup）」を参照して下さい。

【手順流れ】
・不要なカラム（項目）を非表示設定
・テキストフィールドに必要な項目のみ表示設定
・複数選択時のセパレーター設定
・複数選択可能設定
・カラム（項目）のヘッダー非表示設定
・ページ情報部分を非表示設定
・リスト表示形式を全表示設定
・リスト縦スクロールを表示設定
・リストの横幅をテキストフィールドと同じ横幅設定

「ASPxGridLookup」オブジェクトのプロパティを変更していきます。
※プロパティ画像は「グループ表示」

＜複数選択設定＞

・不要なカラム（項目）を非表示設定
「Visible=”False”」を設定します。

※他のカラム（項目）も同様に行います。

・テキストフィールドに必要な項目のみ表示設定
先頭から6番目の項目表示ですので「TextFormatString=”{5}”」を設定します。
※設定の番号はインデックス番号（6番目は0発進のインデックス5に該当）

・複数選択時のセパレーター設定
「MultiTextSeparator=”、”」を設定します。

・複数選択可能設定
「SelectionMode=”Multiple”」を設定します。

・カラム（項目）のヘッダー非表示設定
「ShowColumnHeaders=”False”」を設定します。

・ページ情報部分を非表示設定
「Visible=”False”」を設定します。

・リスト表示形式を全表示設定
「Mode=”ShowAllRecords”」を設定します。

・リスト縦スクロールを表示設定
「VerticalScrollBarMode=”Auto”」を設定します。

・リストの横幅をテキストフィールドと同じ横幅設定
「s.GetGridView().SetWidth(s.GetWidth());」を設定します。
※カラム（項目）の幅設定でも可能です

【サンプルプログラム】

それでは、実行して動作確認を行います。

↓

↓

「神戸」を選択すると、テキストフィールドに「神戸」が表示されます。

↓

次に「松江」を選択すると、テキストフィールドに「松江」が追加表示されます。

↓

リスト外をクリックするとリストが閉じます。

無事にグリッド表示のコンボボックス（ASPxGridLookup）でコンボボックス風の複数選択が可能になりました。