バージョン

Ignite UI でイベントの使用

トピックの概要

目的

このトピックは、Ignite UI™ コントロールが発生させるイベントの処理方法について説明します。また、初期化と初期化後のイベントのバインドの違いについても説明します。

このトピックの内容

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

要件

全般的な要件

  • jQuery の要件
  • Ignite UI コントロールのインスタンスが作成された HTML Web ページ
  • MVC 固有の要件
  • igGrid がデータ ソースにバインドされた Microsoft Visual Studio® の MVC プロジェクト
  • Infragistics.Web.Mvc.dll (ASP.NET MVC ラッパーを含む) への参照

注: コードで API メソッドを呼び出した場合、操作に関連するイベントは発生しません。イベントは個別のユーザー インタラクションによってのみ発生されます。

スクリプト要件

  • jQuery および MVC に必要なスクリプトは同じですが、これは MVC ラッパーが jQuery ウィジットに似た JavaScript を描画するためです。次が必要になります。
    1. jQuery コア ライブラリ スクリプト
    2. jQuery UI ライブラリ
    3. ページで使用するウィジェットに必要な Ignite UI スクリプト ファイル

次のコードは、HTML ドキュメントに追加されるスクリプトです。

HTML の場合:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>
<script type="text/javascript" src="infragistics.dv.js"></script>

イベントにバインド

グリッド イベントにバインドする方法は 2 通りあります。

初期化時にイベントにバインド

ウィジットの初期化時にイベントにバインドする場合は、eventName:<handler> 形式のオプションを使用してイベントにサブスクライブします。以下の例では、イベント ハンドラー機能がインラインで実装されています。ただし、イベント ハンドラーを関数名に割り当ててハンドラーをコントロールの初期化以外で実装することも可能です。

コード例

igGrid

以下は、非表示機能を有効にし、columnHiding イベントに対してイベント ハンドラーを指定して、igGrid コントロールのインスタンスを作成した例です。

コード:

JavaScript の場合:

<script type="text/javascript">
$("#grid1").igGrid({
    features: [
    {
        name: 'Hiding',
        columnHiding: function (e, args) {
            // Handle event  
        }
    }]
});
</script>

igCombo

以下の例は、igCombo コントロールの selectionChanging イベントの処理方法を示しています。

コード:

JavaScript の場合:

<script type="text/javascript">
     $(function () {
          $("#comboTarget").igCombo({
                           selectionChanging: function (e, args) {
                           // Handle event  
                           }
          });
      });
</script>

igTextEditor

以下は、テキスト エディターのインスタンスを作成し、valueChanged イベントへバインドする例です。

コード:

JavaScript の場合:

<script type="text/javascript">
$('#editorContainer').igTextEditor({
    width: 200, 
    valueChanged: function(e, args){
        //Handle event
    }
})
</script>

初期化後にイベントにバインド

概要

jQuery は、多数のイベント処理方法をサポートしています。選択した状況によって、bind()live()delegate() または on() 関数を使用して、イベント ハンドラーをウィジェットのイベントにワイヤーできます。

以下のテーブルは、各関数の詳細を示します。

  • bind: 指定したセレクターに一致する既存の DOM 要素へイベント ハンドラーをアタッチします。

  • live: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベントハンドラーは、DOM ツリーまで伝達しません。

  • delegate: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。イベント ハンドラーは、DOM ツリーまで伝達します。

  • on: 指定したセレクターに一致する既存または新しい DOM 要素へイベント ハンドラーをアタッチします。(delegate 関数は jQuery version 1.7 で廃止され、on 関数がイベント ハンドラー確立の優先方法になりました。)

bind() を使用する場合、現在使用可能な要素にのみ指定されたハンドラーへアタッチすることに注意してください。つまり、動的に追加された項目 (DOM が読み込まれた後) は、イベント ハンドラーの割り当てに含まれません。delegate() 関数は live() 関数の新規バージョンで、live() よりパフォーマンスが向上されました。

注: : jQuery 1.7 以後、live() メソッドは廃止されました。また jQuery 3.0 以後、delegate() および bind() メソッドも廃止されます。これらのメソッドの代わりに、on() および one() 関数の使用を推奨します。

既定の jQuery イベント wiring 関数のいずれかを使用する場合、jQuery UI イベントの命名規則に従ってください。たとえば、jQuery UI ウィジェット ファクトリは、ウィジェットの名前をイベント名のプレフィックスとして追加します。「iggridhiding」ウィジェットの「columnhiding」イベントへアタッチする場合、イベント名は「iggridhidingcolumnhiding」になります。

注: Ignite UI API ガイドでは、各コントロールのオプション、メソッド、イベントすべての一覧を参照できます。

注: ASP.NET MVC ラッパーで igEditor コントロールを使用する場合、ラッパーはインスタンスを作成するウィジェットに基づいて型オプションを設定した igEditor コントロールのインスタンスを作成します。live、bind、または delegate を使用する場合、「igeditor」+ 「eventName」を渡す必要があります。

以下の例で、イベントの bind および unbind のためのセクションがあります。

コード例

igGrid

  • バインド:

    以下のコードは、igGrid コントロールのインスタンスを作成し、列の自動生成を有効にしてデータ ソースをバインドします。

    コード:

    MVC における igGrid のインスタンス化

    HTML の場合:

      @(Html.Infragistics().Grid(Model). ID("grid1")
          .AutoGenerateColumns(true)
          .Features(feature =>{
              feature.Hiding());
              }).DataBind()
          .Render()
      )
    

    次に、既存のグリッド インスタンスを更新して、ハンドラーを実装する他の関数へポイントする columnHiding のイベント ハンドラーを含めます。

    ASPX または HTML の場合:

      $("#grid1").live("iggridhidingcolumnhiding", gridColumnHiding);
    

    以下は、イベント ハンドラー関数のスタブです。

    JavaScript の場合:

      <script type="text/javascript">        
          function gridColumnHiding (evt, ui) {
              // Handle event        
           };   
      </script>
    
  • バインド解除

    概要

    このコードは、確立されたイベント サブスクリプションからサブスクリプションを解除する方法を示します。以下のコードでは、上記コードを再利用して columnHiding イベントへアタッチし、die 関数を使用してイベント ハンドラーから切り離しています。

    注: イベント ハンドラーを一度だけ呼び出す場合、初めてイベントが呼び出された後にイベント ハンドラーのサブスクリプションを解除する one() 関数を使用することを推奨します。

    コード:

    JavaScript の場合:

      <script type="text/javascript">        
          $("#grid1").die("iggridhidingcolumnhiding");
      </script>
    

igCombo

  • バインド

    以下のコードでは、igComboselectionChanging イベントへアタッチします。

    コード:

    HTML の場合:

      @(Html.
          Infragistics().
          Combo().
          ID("comboProducts").
          Width("150px").
          DataSource(new List<string>() 
              { "Item1", "Item2", "Item3" }).
          SelectedIndexes(new int[] { 0 }).
          DataBind().
          Render()
      )
    

    JavaScript:

      $("#comboProducts").live('igcomboselectionchanging', function (e, args) {
          // Handle event
      });
    
  • バインド解除

    このコードでは、上記サンプルで既にアタッチされているイベントからサブスクリプションを解除します。

    コード:

    JavaScript:

      $("#comboProducts").die('igcomboselectionchanging');
    

igTextEditor

  • バインド:

    概要

    このサンプルは、igTextEditor のインスタンスが MVC コンテキストで作成され、valueChanged イベントへバインドされています。ASP.NET MVC ヘルパーを使用して igEditor コントロールから継承したコントロールのインスタンスを作成する場合、レンダリング メソッドは適切な型の値で igEditor コントロールを生成し、エディターを構成します。そのため、イベントをバインドまたはバインド解除する場合、「igeditor」プレフィックスが必要です。

    コード:

    igTextEditor のインスタンス化

    HTML の場合:

      @(Html.Infragistics().TextEditor()
            .ID("textEditor")
            .Width(150)
            .Render()
      )
    

    selectionChanged イベントにバインド

    JavaScript:

      $("#textEditor").live('igedtorvaluechanged', function (e, args) {
          // Handle event
      });
    
  • バインド解除

    以下のコードでは、上記サンプルで既にアタッチされているイベントからサブスクリプションを解除します。

    コード:

    JavaScript:

      $("#textEditor").die('igedtorvaluechanged');
    

関連トピック

関連サンプル

オンラインで表示: GitHub