バージョン

選択の構成 (igCombo)

トピックの概要

目的

igCombo™ コントロールは、選択ビヘイビアーをプログラム的に変更するための単一の選択および複数選択、チェックボックス、選択イベント、および API をサポートしています。このトピックでは、選択機能を構成する方法を示します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

前提条件

以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。

トピック

igCombo の概要および 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 を返すことによるイベントのキャンセル

手順

  1. selectionChanging イベントを処理します。

    1. ハンドラー関数を定義します。

      selectionChanging イベントが発生したときに呼び出される関数を定義します。

      HTML と ASPX の場合:

      <script type="text/javascript">        
    function comboSelectionChanging(evt, ui) {

    };   
</script>

    2. 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);

  2. false を返すことでイベントをキャンセルします。

    HTML と ASPX の場合:

    <script type="text/javascript">

    function comboSelectionChanging(evt, ui) {
       if (conditionNotMet)
          return false;
     };   
</script>

関連トピック

以下は、その他の役立つトピックです。

オンラインで表示: GitHub