このトピックは、Ignite UI for jQuery™ コントロールが発生させるイベントの処理方法について説明します。また、初期化と初期化後のイベントのバインドの違いについても説明します。
このトピックは、以下のセクションで構成されます。
注: コードで API メソッドを呼び出した場合、操作に関連するイベントは発生しません。イベントは個別のユーザー インタラクションによってのみ発生されます。
次のコードは、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> 形式のオプションを使用してイベントにサブスクライブします。以下の例では、イベント ハンドラー機能がインラインで実装されています。ただし、イベント ハンドラーを関数名に割り当ててハンドラーをコントロールの初期化以外で実装することも可能です。
以下は、非表示機能を有効にし、columnHiding イベントに対してイベント ハンドラーを指定して、igGrid コントロールのインスタンスを作成した例です。
JavaScript の場合:
<script type="text/javascript">
$("#grid1").igGrid({
features: [{
name: 'Hiding',
columnHiding: function (e, args) {
// Handle event
}
}]
});
</script>
以下の例は、igCombo コントロールの selectionChanging イベントの処理方法を示しています。
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#comboTarget").igCombo({
selectionChanging: function (e, args) {
// Handle event
}
});
});
</script>
以下は、テキスト エディターのインスタンスを作成し、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 for jQuery API ガイドでは、各コントロールのオプション、メソッド、イベントすべての一覧を参照できます。
注: ASP.NET MVC ラッパーで igEditor コントロールを使用する場合、ラッパーはインスタンスを作成するウィジェットに基づいて型オプションを設定した igEditor コントロールのインスタンスを作成します。live、bind、または delegate を使用する場合、「igeditor」+ 「eventName」を渡す必要があります。
以下の例で、イベントの bind および unbind のためのセクションがあります。
バインド:
以下のコードは、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 の selectionChanging イベントへアタッチします。
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 のインスタンスが MVC コンテキストで作成され、valueChanged イベントへバインドされています。Ignite UI for 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