FlexGrid for WinForms
コンボボックス
> エディタ > コンボボックス

コンボボックスセルは、使用可能な値が明確に定義されたリストをドロップダウンリストの形式でユーザーに提供するためによく使用されます。FlexGrid では、この複数オプションエディタが、ドロップダウンリスト、ドロップダウンコンボ、省略符ボタン、テキストボックスと省略符ボタンなどのさまざまな形式で提供されます。

デフォルトのコンボボックス 複数列のコンボボックス カスタム背景色のコンボボックス 画像を含むコンボボックス
コンボボックスエディタ 複数列のコンボボックス カスタム背景色のコンボボックス 画像を含むコンボリスト

ドロップダウンリストまたはドロップダウンコンボの表示

FlexGrid でドロップダウンリストを作成するには、すべての選択肢をパイプ文字で区切った文字列を作成し(「True|False|Don't know」など)、それを Row オブジェクトまたは Column オブジェクトの ComboList プロパティに割り当てます。 これで、グリッドのセルの横にドロップダウンボタンが表示されます。ユーザーはドロップダウンボタンをクリックするか[F2]キーを押して、そのセルで使用できる選択肢のリストを表示できます。

ほかにもよくある状況として、セルによく使用される値のリストを表示するが、ユーザーにもカスタム値の入力を許可する場合があります。この場合は、テキストボックスとドロップダウンリストを組み合わせたドロップダウンコンボを使用します。FlexGrid でコンボを作成するには、最初にパイプ文字で区切られた選択肢のリスト(「|True|False|Don't know」など)を作成し、それを ComboList プロパティに割り当てます。

次のコードは、WinForms FlexGrid でドロップダウンリストまたはコンボエディタを作成する方法を示しています。

// ドロップダウンリストとしてCustomerIDを割り当てます
c1flexGrid1.Cols["CustomerID"].ComboList = "AJK18F|BBK21D|AEF25N|BZD42S|AKC16G"; 

// ドロップダウンコンボボックスとしてCustomerIDを割り当て、パイプ文字"|"でリストを開始します
// c1flexGrid1.Cols["CustomerID"].ComboList = "|AJK18F|BBK21D|AEF25N|BZD42S|AKC16G";                       
' ドロップダウンリストとしてCustomerIDを割り当てます
c1flexGrid1.Cols("CustomerID").ComboList = "AJK18F|BBK21D|AEF25N|BZD42S|AKC16G"

' ドロップダウンコンボボックスとしてCustomerIDを割り当て、パイプ文字"|"でリストを開始します
' c1flexGrid1.Cols("CustomerID").ComboList = "|AJK18F|BBK21D|AEF25N|BZD42S|AKC16G"      

ComboList プロパティは、設計時に[コンボリスト]ダイアログを使用して設定することもできます。[コンボリスト]ダイアログにアクセスするには、次の手順に従います。

  1. エディタを設定する列の列タスクメニューを開きます。
  2. [コンボリスト]オプションに移動して、フィールドの右側にある省略符ボタンをクリックします。
  3. [コンボリスト]ダイアログが開きます。このダイアログで、新しい行にオプション値を 1 つずつ指定できます。
  4. これらの値をドロップダウンリストとして表示するか、ドロップダウンコンボとして表示するかを選択することもできます。[省略符ボタン]オプションまたは[テキストボックスと省略符ボタン]オプションを使用して、セルボタンを作成することもできます。
    [コンボリスト]ダイアログ

複数列コンボボックスの表示

FlexGrid では、MultiColumnDictionary クラスを使用して、コンボボックスに複数の列を表示することもできます。このクラスは IC1MultiColumnDictionary インタフェースを実装し、複数のオーバーロードがあります。このオーバーロードを使用して、データソースオブジェクト、キー列、複数の列に表示する列、およびコンボボックスを閉じたときに表示する列を指定できます。

WinForms FlexGrid の列に複数列のコンボボックスを表示するには、次のコードを使用します。

string[] columnRange = new string[] { "City", "Country" };
c1FlexGrid1.Cols["City"].DataMap = new MultiColumnDictionary(dt, "City", columnRange, 0);
Dim columnRange = New String() {"City", "Country"}
c1FlexGrid1.Cols("City").DataMap = New MultiColumnDictionary(dt, "City", columnRange, 0)

このコードでは、データソースオブジェクト dt を使用してグリッドにデータを提供しています。要件に基づいてデータソースを設定できます。

   DataTable dt = new DataTable();
   dt.Columns.Add("CustomerID", typeof(int));
   dt.Columns.Add("ContactName", typeof(string));
   dt.Columns.Add("Designation", typeof(string));
   dt.Columns.Add("City", typeof(string));
   dt.Columns.Add("Country", typeof(object));

// サンプルデータ
   dt.Rows.Add(1, "Maria Anders", "Sales Representative", "Madrid", "Spain" );
   dt.Rows.Add(2, "Ana Trujillo", "Sales Associate", "Monterrey", "Mexico" );
   dt.Rows.Add(3, "Antonio Moreno", "Owner", "Dublin", "Ireland");
   dt.Rows.Add(4, "Thomas Hardy", "Sales Representative", "Bristol", "UK");
   dt.Rows.Add(5, "Patricio Simpson", "Marketing Manager", "Munich", "Germany");
   dt.Rows.Add(6, "Paolo Accorti", "Sales Representative", "Barcelona", "Spain");
   dt.Rows.Add(7, "Martine Rance", "Owner", "Puebla", "Mexico");
   dt.Rows.Add(8, "Elizabeth Brown", "Marketing Manager", "London", "UK");
   dt.Rows.Add(9, "Jaime Yorres", "Order Administrator", "Vienna", "Austria");
   dt.Rows.Add(10, "Yvonne Moncada", "Marketing Manager", "Mexico", "Mexico");
   dt.Rows.Add(11, "Helen Bennett", "Owner/Marketing", "Cork", "Ireland");
   dt.Rows.Add(12, "Sergio Gutierrezy", "Order Administrator", "Sao Paulo", "Brazil");

   c1FlexGrid1.DataSource = dt;
Dim dt As DataTable = New DataTable()
dt.Columns.Add("CustomerID", GetType(Integer))
dt.Columns.Add("ContactName", GetType(String))
dt.Columns.Add("Designation", GetType(String))
dt.Columns.Add("Country", GetType(Object))
dt.Columns.Add("City", GetType(String))

' サンプルデータ
dt.Rows.Add(1, "Maria Anders", "Sales Representative", "Spain", "Madrid")
dt.Rows.Add(2, "Ana Trujillo", "Sales Associate", "Mexico", "Monterrey")
dt.Rows.Add(3, "Antonio Moreno", "Owner", "Ireland", "Dublin")
dt.Rows.Add(4, "Thomas Hardy", "Sales Representative", "UK", "Bristol")
dt.Rows.Add(5, "Patricio Simpson", "Marketing Manager", "Germany", "Munich")
dt.Rows.Add(6, "Paolo Accorti", "Sales Representative", "Spain", "Barcelona")
dt.Rows.Add(7, "Martine Rance", "Owner", "Mexico", "Puebla")
dt.Rows.Add(8, "Elizabeth Brown", "Marketing Manager", "UK", "London")
dt.Rows.Add(9, "Jaime Yorres", "Order Administrator", "Austria", "Vienna")
dt.Rows.Add(10, "Yvonne Moncada", "Marketing Manager", "Mexico", "Mexico")
dt.Rows.Add(11, "Helen Bennett", "Owner/Marketing", "Ireland", "Cork")
dt.Rows.Add(12, "Sergio Gutierrezy", "Order Administrator", "Brazil", "Sao Paulo")
c1FlexGrid1.DataSource = dt

コンボボックスへのマップデータの設定

コンボボックスに実際の値と異なる値を表示するように設定するには、C1ComboBox をエディタとして使用し、その ItemsDisplayMember プロパティと ItemsValueMember プロパティを利用する必要があります。たとえば、次の例では、実際の値はそれぞれの国の国番号ですが、表示する値としては国名を使用しています。

マップデータの表示値を表示するコンボボックス

次のコードは、WinForms FlexGrid のコンボボックス列にマップデータを設定する方法を示しています。

private void Form1_Load(object sender, EventArgs e)
{
 // 顧客データを取得します
 Customers = GetCustomers();

 // FlexGridにデータを入力します
 c1FlexGrid1.DataSource = Customers;

 // 国とその国コードのコレクションを作成します
 ObservableCollection<Country> countries = new ObservableCollection<Country>();
 countries.Add(new Country(1, "USA"));
 countries.Add(new Country(91, "India"));
 countries.Add(new Country(7, "Russia"));
 countries.Add(new Country(54, "Argentina"));
 countries.Add(new Country(81, "Japan"));
 countries.Add(new Country(380, "Ukraine"));
 countries.Add(new Country(98, "Iran"));
 countries.Add(new Country(45, "Denmark"));
 countries.Add(new Country(84, "Vietnam"));
 countries.Add(new Country(49, "Germany"));
 BindingSource countryBS = new BindingSource();
 countryBS.DataSource = countries;

 // C1Comboboxコントロールをインスタンス化して設定します 
 C1ComboBox countryCodeCombo = new C1ComboBox();
 countryCodeCombo.ItemsDataSource = countryBS;

 #region Mapped Data using C1Combobox 

 // 国コードと国名をマッピングするためにプロパティを設定します
 countryCodeCombo.ItemsDisplayMember = "CountryName";
 countryCodeCombo.ItemsValueMember = "CountryCode";
 countryCodeCombo.TextDetached = true;
 countryCodeCombo.TranslateValue = true;

 // C1ComboboxをDiallingCode列のエディタとして設定します
 c1FlexGrid1.Cols["DiallingCode"].Editor = countryCodeCombo;
 #endregion
}
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' 顧客データを取得します
    Customers = GetCustomers()

    ' FlexGridにデータを入力します
    c1FlexGrid1.DataSource = Customers

    ' 国とその国コードのコレクションを作成します
    Dim countries As ObservableCollection(Of Country) = New ObservableCollection(Of Country)()
    countries.Add(New Country(1, "USA"))
    countries.Add(New Country(91, "India"))
    countries.Add(New Country(7, "Russia"))
    countries.Add(New Country(54, "Argentina"))
    countries.Add(New Country(81, "Japan"))
    countries.Add(New Country(380, "Ukraine"))
    countries.Add(New Country(98, "Iran"))
    countries.Add(New Country(45, "Denmark"))
    countries.Add(New Country(84, "Vietnam"))
    countries.Add(New Country(49, "Germany"))
    Dim countryBS As BindingSource = New BindingSource()
    countryBS.DataSource = countries

    ' C1Comboboxコントロールをインスタンス化して設定します 
    Dim countryCodeCombo As C1ComboBox = New C1ComboBox()
    countryCodeCombo.ItemsDataSource = countryBS

    ' 国コードと国名をマッピングするためにプロパティを設定します
    countryCodeCombo.ItemsDisplayMember = "CountryName"
    countryCodeCombo.ItemsValueMember = "CountryCode"
    countryCodeCombo.TextDetached = True
    countryCodeCombo.TranslateValue = True

    ' C1ComboboxをDiallingCode列のエディタとして設定します
    c1FlexGrid1.Cols("DiallingCode").Editor = countryCodeCombo
End Sub 

コンボボックスのサイズの設定

コンボボックスのドロップダウンの高さと幅を設定するには、ComboBox のインスタンスをエディタとして割り当て、そのインスタンスの DropDownHeight プロパティおよび DropDownWidth プロパティを設定する必要があります。

サイズを指定したコンボボックス

WinForms FlexGrid に表示するコンボボックスの高さと幅を指定するには、次のコードを使用します。

    ComboBox cb = (ComboBox)c1flexGrid1.Editor;
    cb.DropDownWidth = 250;
    cb.DropDownHeight = 200;                
    Dim cb As ComboBox = CType(c1flexGrid1.Editor, ComboBox)
    cb.DropDownWidth = 250
    cb.DropDownHeight = 200 

背景色やフォントの色の変更

コンボボックスリストの背景色やフォントの色を変更するには、ComboBox のインスタンスを作成し、それをエディタとして割り当てます。次に、そのインスタンスの BackColor プロパティおよび ForeColor プロパティを設定します。

WinForms FlexGrid のコンボボックスをカスタマイズするには、次のコードを使用します。

   ComboBox comboBox = (ComboBox)c1flexGrid1.Editor;
   comboBox.BackColor = Color.Black;
   comboBox.ForeColor = Color.White;                
    Dim comboBox As ComboBox = CType(c1flexGrid1.Editor, ComboBox)
    comboBox.BackColor = Color.Black
    comboBox.ForeColor = Color.White 

リストへの画像の表示

コンボボックスリストに画像を表示するには、C1ComboBox をエディタとして使用し、その ItemsImageList プロパティを利用する必要があります。このプロパティは ImageList クラス型です。このクラスは、その Images コレクションに保存される画像のコンテナになります。最初に、ResourceManager.GetResourceSet メソッドを使用してプロジェクトリソースに保存されている画像にアクセスし、画像とそれに対応する名前をマップするためのコレクションを作成します。 このコレクションが ComboBox のデータソースになります。次に、ImageList クラスのインスタンスを作成し、データソースから画像をその Images コレクションに追加します。この ImageList クラスのインスタンスを ItemsImageList プロパティに割り当てて、コンボボックスリストに画像をレンダリングします。

次のコードは、WinForms FlexGrid のコンボボックスリストに画像を表示する方法を示しています。

// コンボボックスに画像を入力します
    var itemsSource = new List<Flag>();
    ImageList imgFlag = new ImageList();
    imgFlag.Images.Clear();
    var rsrSet = Resources.ResourceManager.GetResourceSet(CultureInfo.CurrentCulture, true, true);

 foreach(DictionaryEntry entry in rsrSet)
 {
    var img = entry.Value as Image;
    itemsSource.Add(new Flag(entry.Key.ToString(), img));
    }
 itemsSource.Sort(new CompareFlag());

  foreach (Flag entry in itemsSource)
 {
     imgFlag.Images.Add(entry.CountryName, entry.CountryFlag);
  }

 countryCombo.ItemsImageList = imgFlag;
 countryCombo.ItemMode = ComboItemMode.HtmlPattern;
 countryCombo.HtmlPattern = "<div <div style='padding:0px'><img src='{CountryName}' style='padding-right:14px'>{CountryName}</div>";
' コンボボックスに画像を入力します 
Dim itemsSource = New List(Of Flag)()
Dim imgFlag As ImageList = New ImageList()
imgFlag.Images.Clear()
Dim rsrSet = Resources.ResourceManager.GetResourceSet(CultureInfo.CurrentCulture, True, True)

For Each entry As DictionaryEntry In rsrSet
    Dim img = TryCast(entry.Value, Image)
    itemsSource.Add(New Flag(entry.Key.ToString(), img))
Next

itemsSource.Sort(New CompareFlag())

For Each entry In itemsSource
    imgFlag.Images.Add(entry.CountryName, entry.CountryFlag)
Next

countryCombo.ItemsImageList = imgFlag
countryCombo.ItemMode = ComboItemMode.HtmlPattern
countryCombo.HtmlPattern = "<div <div style='padding:0px'><img src='{CountryName}' style='padding-right:14px'>{CountryName}</div>"

表示する項目の数の設定

コンボボックスに表示する項目の数を設定するには、ComboBox.MaxDropDownItems プロパティを使用します。

WinForms FlexGrid のコンボボックスリストに表示する項目の数を制限するには、次のコードを使用します。

// コンボボックスのドロップダウンに表示する国の数を設定します
   countryCombo.MaxDropDownItems = 10;
' コンボボックスのドロップダウンに表示する国の数を設定します
countryCombo.MaxDropDownItems = 10

コンボボックスリストのソート

コンボボックスドロップダウンリストの項目をソートするには、C1ComboBox をエディタとして使用し、Sort メソッドを呼び出して、コンボボックスに表示されるドロップダウン項目をソートします。

ソートされたコンボボックスリスト

WinForms FlexGrid のコンボボックスリストに項目をソートして表示するには、次のコードを使用します。

   C1ComboBox countryCombo = new C1ComboBox();
   countryCombo.DropDownStyle = DropDownStyle.DropDownList;
   List<string> countries = new List<string> { "USA", "Canada", "India", "Russia", "Japan", "Germany" };
   countries.Sort();
   countryCombo.ItemsDataSource = countries;

   // C1ComboboxをCountry列のエディタとして設定します
   c1FlexGrid1.Cols["Country"].Editor = countryCombo;
    Dim countryCombo As C1ComboBox = New C1ComboBox()
    countryCombo.DropDownStyle = DropDownStyle.DropDownList
    Dim countries As List(Of String) = New List(Of String) From {
        "USA",
        "Canada",
        "India",
        "Russia",
        "Japan",
        "Germany"
    }
    countries.Sort()
    countryCombo.ItemsDataSource = countries

    ' C1ComboboxをCountry列のエディタとして設定します
    c1FlexGrid1.Cols("Country").Editor = countryCombo      

選択インデックスの取得

選択インデックスまたは選択項目の値を取得するには、ComboBoxEditor クラスの SelectedIndex プロパティまたは SelectedItem プロパティを使用します。次の例では、ComboCloseUp イベントを使用して、選択インデックスと選択項目を示すメッセージボックスを表示しています。

WinForms FlexGrid のコンボボックスリストで選択項目のインデックスと値を取得するには、次のコードを使用します。

コンボボックスの選択インデックスの取得

   private void C1FlexGrid1_ComboCloseUp(object sender, C1.Win.C1FlexGrid.RowColEventArgs e)
   {
     MessageBox.Show("Selected Index:" +
     c1FlexGrid1.ComboBoxEditor.SelectedIndex + "\n" +
     "Selected Item:" +
     c1FlexGrid1.ComboBoxEditor.SelectedItem);
   }
Private Sub C1FlexGrid1_ComboCloseUp(ByVal sender As Object, ByVal e As C1.Win.C1FlexGrid.RowColEventArgs)
    MessageBox.Show("Selected Index:" & c1FlexGrid1.ComboBoxEditor.SelectedIndex & vbLf & "Selected Item:" + c1FlexGrid1.ComboBoxEditor.SelectedItem)
End Sub