項目の設定

コンボコントロールに項目を設定する方法について説明します。

項目の構成

コンボコントロールのリストボックスに追加される項目は、下図のように構成されます。なお、リストボックスの設定方法については、「リストボックスの使い方」に解説しています。

コントロールに追加される項目はComboItemオブジェクトで生成され、サブ項目を保持します。サブ項目はSubItemオブジェクトで作成され、ComboItemクラスのSubItemsプロパティが参照するコレクションに追加されます。

項目に追加されたサブ項目をリストボックスに表示するには、リストボックスのカラムを追加する必要があります。カラムは、ListColumnオブジェクトをListBoxクラスのColumnsプロパティに追加します。カラムの設定方法については「リストボックスの使い方－カラムの設定」を参照してください。

項目、サブ項目の追加、削除や詳細な設定は、デザイン画面でスマートタグの「項目の編集...」またはプロパティウィンドウのItemsプロパティから起動できる、「ComboItem コレクションエディタ」を使用することで容易に行うことができます。ここでは、コードから項目を操作する方法について解説します。

項目の追加

コンボコントロールに項目を設定するには、Itemsプロパティが参照するComboItemCollectionオブジェクトに直接アクセスする方法と、DataSource、またはDataSourceIDプロパティを使用し、データソースに接続する方法の２つがあります。

それぞれの設定方法については、下記に解説しています。

項目表示の高速化

LoadDataDynamicallyプロパティをTrueに設定すると、リストボックス内の項目のロードに内部でAjax(Asynchronous JavaScript + XML)を使用し、RecordsPerRequestプロパティで設定された数だけデータを読み込み、コントロールの表示を高速化します。

リストボックスをスクロールし、読み込み済みのデータ数を超えると、それ以降のデータがRecordsPerRequestプロパティで設定された数だけ再度読み込まれます。RecordsPerRequestプロパティで設定された数よりリストボックスのサイズが大きい場合、リストボックスのサイズ分のデータが読み込まれます。

LoadDataDynamicallyプロパティがFalseの場合は、ページロード時にコントロールが保持するすべての項目データが読み込まれます。そのため、項目の数が多いほど、ページの読み込みに時間を要し、表示速度が劣化します。

クライアント側で項目の追加や削除を行うには、LoadDataDynamicallyプロパティをFalseにする必要があります。
クライアント側スクリプトで、RecordsPerRequestプロパティで指定した、読み込み済みのデータ数を超えた項目の選択や値の取得などを行うと、エラーが発生する場合があります。

クライアント側での項目の追加と削除

コンボコントロールでは、サーバーにポストバックすることなく、クライアント側で項目の追加や削除を行うことが可能です。
クライアント側では、ListItemオブジェクトで生成された項目をAddItemメソッドによりコントロールに追加します。また、InsertItem、RemoveItem、ClearItemsメソッドにより、項目の挿入、削除等も可能です。

サブ項目は、ListSubItemオブジェクトを使用して作成し、ListItemオブジェクトのAddSubItemメソッドにより項目に追加します。サブ項目についてもInsertSubItem、RemoveSubItem、ClearSubItemsメソッドにより挿入、削除が可能です。

クライアント側で項目の追加や削除を行うには、下記の点にご注意ください。

サーバー側のLoadDataDynamicallyプロパティをFalseに設定する必要があります。
クライアント側ではカラムの追加や削除を行う機能はサポートされていません。追加するサブ項目を表示するには、あらかじめサーバー側でカラムの設定を行う必要があります。

次のサンプルコードは、クライアント側でコントロールに項目を追加する方法を示します。

JavaScript

// 追加する一つ目の項目のインスタンスを生成します。
var item1 = new GCIM.ListItem();
// サブ項目を2つ設定し、項目に追加します。
var subitem1_1 = new GCIM.ListSubItem("項目1-1"、"center"、"top");
var subitem1_2 = new GCIM.ListSubItem("項目1-2"、"center"、"top");
item1.AddSubItem(subitem1_1);
item1.AddSubItem(subitem1_2);

// 追加する二つ目の項目のインスタンスを生成します。
var item2 = new GCIM.ListItem();
// サブ項目を2つ設定し、項目に追加します。
var subitem2_1 = new GCIM.ListSubItem("項目2-1"、"center"、"top");
var subitem2_2 = new GCIM.ListSubItem("項目2-2"、"center"、"top");
item2.AddSubItem(subitem2_1);
item2.AddSubItem(subitem2_2);

// コンボコントロールに項目を追加します。
var combo = FindIMControl("GcComboBox1");
combo.AddItem(item1);
combo.AddItem(item2);

次のサンプルコードは、選択されている項目を削除します。

JavaScript

// 項目を削除します。
var combo = FindIMControl("GcComboBox1");
combo.RemoveItem(combo.GetSelectedItem());

7.0J以前のバージョンとの互換性

7.0J以前のバージョンでは、ComboItemオブジェクトで作成された項目をGetItemsメソッドから参照されるComboItemCollectionコレクションに追加し、サブ項目はSubItemオブジェクトで作成されComboItemオブジェクトのGetSubItemsが参照する配列に追加していました。
10.0Jにおいても同様の実装が可能です。ただし、ComboItemやSubItemオブジェクトはJavaScriptリファレンスには記載されていませんので、ご注意ください。

また、7.0J以前は項目の追加や削除を行ったあとは、RefreshItemsクライアントメソッドを実行する必要がありましたが、10.0J以降はこれが不要となりました。RefreshItemsメソッドを実行しなくても項目は更新され、ポストバック後も維持されます。

以下は、7.0J以前のバージョンでの実装例ですが、10.0Jでも正しく動作します。

JavaScript

// サブ項目を3つ持つ項目1を設定します。
var item1 = new ComboItem();
item1.SubItems[0] = new SubItem();
item1.SubItems[0].SetValue("項目1-1");
item1.SubItems[1] = new SubItem();
item1.SubItems[1].SetValue("項目1-2");
item1.SubItems[2] = new SubItem();
item1.SubItems[2].SetValue("項目1-3"); 
                                        
// サブ項目を3つ持つ項目2を設定します。 
var item2 = new ComboItem();
item2.SubItems[0] = new SubItem();
item2.SubItems[0].SetValue("項目2-1");
item2.SubItems[1] = new SubItem();
item2.SubItems[1].SetValue("項目2-2");
item2.SubItems[2] = new SubItem();
item2.SubItems[2].SetValue("項目2-3");
                                        
// コントロールに項目を追加します。
var ComboItems = FindIMControl("GcComboBox1").GetItems();
ComboItems.Add(item1);
ComboItems.Add(item2);

項目の検索

サーバー側での検索

コンボコントロールでは、項目を検索するために２種類のメソッドを用意しています。これらのメソッドは、該当する最初の項目だけでなく、該当するすべての項目を保持するコレクションを戻すことができます。

FindStringメソッド
FindStringExactメソッド

次のサンプルコードは、FindStringメソッドの使用方法を示します。

Visual Basic
C#

Imports GrapeCity.Web.Input.IMCombo
Imports GrapeCity.Web.Input.Core.ListBox
Imports System.Diagnostics

' コントロールにカラムを設定します。
GcComboBox1.ListBox.Columns.Clear()
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム1"))
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム2"))
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム3"))

' コントロールに項目を追加します。
GcComboBox1.Items.Add(New ComboItem(New SubItem("AAA"), New SubItem("abcde"), New SubItem(DateTime.Parse("2013/12/01"))))
GcComboBox1.Items.Add(New ComboItem(New SubItem("BBB"), New SubItem("bcdef"), New SubItem(DateTime.Parse("2013/12/15"))))
GcComboBox1.Items.Add(New ComboItem(New SubItem("CCC"), New SubItem("cdefg"), New SubItem(DateTime.Parse("2013/11/01"))))
GcComboBox1.Items.Add(New ComboItem(New SubItem("DDD"), New SubItem("defgh"), New SubItem(DateTime.Parse("2013/11/15"))))

' FindStringメソッドを使って検索します
Dim matchedItem As MatchedComboItemCollection
Dim item As ComboItem
matchedItem = GcComboBox1.FindString(1, "bcd")
For Each item In matchedItem
    ' 検索結果をデバッグウィンドウに表示します。
    Debug.WriteLine(item.Text)
Next

using GrapeCity.Web.Input.IMCombo;
using GrapeCity.Web.Input.Core.ListBox;
using System.Diagnostics;

// コントロールにカラムを設定します。
GcComboBox1.ListBox.Columns.Clear();
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム1"));
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム2"));
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム3"));

// コントロールに項目を追加します。
GcComboBox1.Items.Add(new ComboItem(new SubItem("AAA"), new SubItem("abcde"), new SubItem(DateTime.Parse("2013/12/01"))))
GcComboBox1.Items.Add(new ComboItem(new SubItem("BBB"), new SubItem("bcdef"), new SubItem(DateTime.Parse("2013/12/15"))))
GcComboBox1.Items.Add(new ComboItem(new SubItem("CCC"), new SubItem("cdefg"), new SubItem(DateTime.Parse("2013/11/01"))))
GcComboBox1.Items.Add(new ComboItem(new SubItem("DDD"), new SubItem("defgh"), new SubItem(DateTime.Parse("2013/11/15"))))

// FindStringメソッドを使って検索します。
MatchedComboItemCollection matchedItem;
matchedItem = GcComboBox1.FindString(1, "bcd");
foreach (ComboItem item in matchedItem)
{
    // 検索結果をデバッグウィンドウに表示します。
    Debug.WriteLine(item.Text);
}

クライアント側での検索

コンボコントロールでは、クライアント側でも下記のメソッドを使用して項目を検索することが可能です。クライアント側では、該当する最初の項目のインデックスを取得することができます。

次のサンプルコードでは、FindStringの使用方法を示します。

JavaScript

var combo = FindIMControl("GcComboBox1");  
combo.SetSelectedIndex(combo.FindString(0, "b", 0));

項目のソート

コンボコントロールでは、ページ読み込み時に、リストボックスに設定されている項目を指定したカラムでソートすることができます。ソートの対象となるカラムは、ListBoxクラスのSortColumnIndexプロパティにインデックスを指定します。ソートの方法は、カラムを定義するListColumnクラスのSortOrderプロパティで指定します。

次のサンプルコードは、インデックス1のカラムで昇順にソートする例です。

Visual Basic
C#

Imports GrapeCity.Web.Input.IMCombo
Imports GrapeCity.Web.Input.Core
Imports GrapeCity.Web.Input.Core.ListBox

' カラムを追加します。
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム1"))
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム2"))
GcComboBox1.ListBox.Columns.Add(New ListColumn("カラム3"))

// 項目を追加します。
GcComboBox1.Items.Add(New ComboItem(New SubItem("AAA"), New SubItem("ccc"), New SubItem("444")))
GcComboBox1.Items.Add(New ComboItem(New SubItem("CCC"), New SubItem("bbb"), New SubItem("111")))
GcComboBox1.Items.Add(New ComboItem(New SubItem("DDD"), New SubItem("ddd"), New SubItem("333")))
GcComboBox1.Items.Add(New ComboItem(New SubItem("BBB"), New SubItem("aaa"), New SubItem("222")))

' インデックス1のカラムで昇順にソートします。
GcComboBox1.ListBox.SortColumnIndex = 1
GcComboBox1.ListBox.Columns(1).SortOrder = SortOrder.Ascending

using GrapeCity.Web.Input.IMCombo;
using GrapeCity.Web.Input.Core;
using GrapeCity.Web.Input.Core.ListBox;

// カラムを追加します。
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム1"));
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム2"));
GcComboBox1.ListBox.Columns.Add(new ListColumn("カラム3"));

// 項目を追加します。
GcComboBox1.Items.Add(new ComboItem(new SubItem("AAA"), new SubItem("ccc"), new SubItem("444")));
GcComboBox1.Items.Add(new ComboItem(new SubItem("CCC"), new SubItem("bbb"), new SubItem("111")));
GcComboBox1.Items.Add(new ComboItem(new SubItem("DDD"), new SubItem("ddd"), new SubItem("333")));
GcComboBox1.Items.Add(new ComboItem(new SubItem("BBB"), new SubItem("aaa"), new SubItem("222")));

// インデックス1のカラムで昇順にソートします。
GcComboBox1.ListBox.SortColumnIndex = 1;
GcComboBox1.ListBox.Columns[1].SortOrder = SortOrder.Ascending;