このトピックでは、igHierarchicalGrid™ コントロールの行セレクターのイベントに関するリファレンスと、こうしたイベントの処理に関するコード例を示します。
この題材を理解するのにあらかじめ必要となるトピック。
このトピックは、以下のセクションで構成されます。
igGridRowSelectors ウィジェットに固有なイベントは次の 3 つです。
checkBoxStateChangingcheckBoxStateChangedrowSelectorClickedcheckBoxStateChanging イベントは取り消し可能なものであり、イベント ハンドラーが false を返す場合は伝達を停止できます。
igGridRowSelectors コントロールの各イベントの目的と機能。
| プロパティ | 説明 | 停止可能 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| rowSelectorClicked |
行セレクターをクリックすると発生します。ハンドラー関数は、引数 evt と ui を取得します。ui 引数のオプションと各オプションの使用方法は以下のとおりです。
follow.
|
|
||||||||||||||||||||
| checkBoxStateChanging |
行セレクター チェックボックスの状態が変更されるときに発生します。ハンドラー関数は、引数 evt と ui を取得します。ui 引数のオプションと各オプションの使用方法は以下のとおりです。
|
|
||||||||||||||||||||
| checkBoxStateChanged |
行セレクターのチェックボックスの状態が変更された後に発生します。ハンドラー関数は、引数 evt と ui を取得します。ui 引数のオプションと各オプションの使用方法は以下のとおりです。
|
|
初期化時に特定のイベント ハンドラー関数を共通のオプションとして igGridRowSelectors コントロールの rowSelectorClicked イベントに割り当てます。このイベントが発生すると、指定した処理関数が呼び出されます。ただし、コントロールをいったん破棄して作成し直した場合、同じハンドラーを再度割り当てておかない限り、このイベント ハンドラーが呼び出されることはなくなります。
初期化時にイベント ハンドラー関数を rowSelectorClicked イベントに割り当てる場合のコード例。
JavaScript の場合:
$("#grid").igHierarchicalGrid({
initialDataBindDepth: -1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
rowSelectorClicked: function(evt, ui) {
// Handle event
}
},
{
name: 'Selection'
}
]
});
Ignite UI for MVC を使用する場合、jQueryの on() メソッドを使用して、ランタイムにイベントハンドラーをアタッチできます。
JavaScript の場合:
$("#grid").on("iggridrowselectorsrowselectorclicked", function (e, args) {
// Handle event
}
);
このオプションは、Ignite UI for MVC を使用する場合にも使用できますが、Ignite UI for MVC は、 AddClientEvent メソッドによって別の方法も公開します。最初のメソッド引数は、イベントのオプションの文字列名前です。第 2 の引数は、イベント ハンドラー関数の文字列名前です。
この方法は一般的なユース ケースに使用できますが、AddClientEvent メソッドの第 2 の引数も実行する JavaScript コードの文字列が可能で、スクリプト要素タグがない手順 2 の完全な JavaScript 関数を表現する文字列も可能です。
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().Inherit(true).AddClientEvent("rowSelectorClicked", "selectorClicked")
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
このコード例では、checkBoxStateChanging イベントの取り消し方を示します。このコードが実行されると、指定した基準を満たしている特定の行が選択不可または未選択状態になります。
この例では、ヘッダー行のチェックボックスにチェックが入っているかどうかを確認するコードが定義されています。checkBoxStateChanging イベントを呼び出すことにより、チェックボックスの選択を取り消せるようになります。この方法により、すべての行の一括選択を防止して、ユーザーに各行を個別に選択させることができるようになります。これにより、ユーザーは目的の行を一括して選択することができなくなり、各行を 1 つずつ別個に選択せざるをえなくなります。
JavaScript の場合:
$("#grid").igHierarchicalGrid({
initialDataBindDepth: -1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (evt, ui) {
if (ui.isHeader && ui.newState === "on")
return false;
}
},
{
name: 'Selection'
}
]
});
詳しくは、以下の各トピックを参照してください。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub