igCombo
™ コントロールは、選択ビヘイビアーをプログラム的に変更するための単一の選択および複数選択、チェックボックス、選択イベント、および API をサポートしています。このトピックでは、選択機能を構成する方法を示します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。
トピック
igCombo の概要および igCombo の追加トピックをお読みください。
外部リソース
まず以下のセクションを読む必要があります。
以下の表は、igCombo
コントロールの構成可能なビヘイビアーを示しています。
構成可能な動作 | ビヘイビアーの詳細 | 構成プロパティ |
---|---|---|
複数選択 | 複数選択では、ユーザーはドロップダウンから、またはテキスト ボックスに複数の値を入力してコンボの 1 つ以上の項目を選択できます。 | multiSelection |
選択のクリア | igCombo コントロールから選択をプログラム的にクリアします。 | deselectAll |
選択イベントの処理 | 選択イベントをキャプチャし、発生している選択操作に対するロジックを実行します。 | selectionChanging |
選択イベントの処理 | 選択イベントをキャプチャし、発生している選択操作に対するロジックを実行します。 | selectionChanging selectionChanged |
選択のキャンセル | 選択操作をキャンセルするには、選択変更イベントをキャンセルします | selectionChanging |
複数選択が有効になっている場合、ユーザーはマウスまたはキーボードによってドロップダウン リストから複数項目を選択できます。また、テキスト ボックスに複数の値を入力し、itemSeparator
で区切って対応する値を選択することもできます。itemSeparator
のデフォルト値は ', '
です。
最後に、複数選択が簡単にできるようチェックボックスを有効にできます。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igCombo
コントロールのオプションからアクセスされます。
構成の目的: | このオプションの使用: | プロパティ値 |
---|---|---|
複数選択 | multiSelection.enabled | true |
チェックボックスの表示 | multiSelection.showCheckboxes | true |
以下のパラメーターを指定した igCombo
コントロール オプションを使用して複数選択を構成するため、この例で使用されている完全なコードを次に示します。
複数選択 - チェックボックスで有効
HTML の場合:
<script type="text/javascript">
$(function () {
$("#comboTarget").igCombo({
dataSource: colors,
multiSelection: {
enabled: true,
showCheckboxes: true
}
});
});
</script>
ASPX の場合:
<%= Html.
Infragistics().
Combo().
DataSource(this.Model as IQueryable<System.Drawing.Color>).
MultiSelectionSettings(ms => {
ms.Enabled(true);
ms.ShowCheckBoxes(true);
}).
Render()
%>
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
igCombo のオプション
igCombo
コントロールの選択をプログラム的にクリアするには、deselectAll メソッドを使用します。
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。プロパティは igCombo
オプションからアクセスされます。
目的: | このメソッドおよびイベントの使用: |
---|---|
選択のクリア | deselectAll |
選択が変更された後でイベントを処理します | selectionChanged |
選択イベントを使用して、選択操作の発生時にロジックを実行できます。selectionChanging
はコントロール内で選択が変更される前に発生し、selectionChanged
イベントは igCombo の選択が変更された直後に発生します。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igCombo
オプションからアクセスされます。
目的: | このイベントの使用: | プロパティ値 |
---|---|---|
変更中の選択の前にイベントを処理します | selectionChanging | function() |
選択が変更された後でイベントを処理します | selectionChanged | function() |
selectionChanging
イベントを処理することで、選択操作をキャンセルできます。
以下はプロセスの概念的概要です。
selectionChanging
イベントの処理
false を返すことによるイベントのキャンセル
selectionChanging
イベントを処理します。
ハンドラー関数を定義します。
selectionChanging
イベントが発生したときに呼び出される関数を定義します。
HTML と ASPX の場合:
<script type="text/javascript">
function comboSelectionChanging(evt, ui) {
};
</script>
selectionChanging
イベントのハンドラーを構成します。
いったんハンドラーを定義したら、selectionChanging
イベントのハンドラーとして設定する必要があります。jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。ASP.NET MVC では、jQuery live または bind API を使用してイベントを添付する必要があります。また live または bind API の使用は、純粋な jQuery 実装のイベントを添付するためのオプションです。このイベントの型は「igcomboselectionchanging」です。
HTML の場合:
$("#comboTarget").igCombo({
selectionChanging: comboSelectionChanging
});
ASPX の場合:
$("#comboTarget").bind("igcomboselectionchanging", comboSelectionChanging);
false を返すことでイベントをキャンセルします。
HTML と ASPX の場合:
<script type="text/javascript">
function comboSelectionChanging(evt, ui) {
if (conditionNotMet)
return false;
};
</script>
以下は、その他の役立つトピックです。
オンラインで表示: GitHub