WebDataGrid では、Tab キー押下で次セル移動、Enter キー押下で下セル移動など、予めユーザのキー操作に対するグリッドの振るまいがいくつか組み込まれています。このデフォルト動作を変更したいというお問い合わせは頻繁にいただくものなので、その方法を紹介します。
WebDataGrid のクライアント側のイベントをハンドリングし Javascript でこれらの動作を変更していきます。
まず、Enter キーを押下した際に下セルへフォーカスが移動するのを抑止します。ここでは、ActiveCellChanging というアクティブセル(見た目上のフォーカスを持っているセル)が変更される際に発生するイベントをハンドリングします。このイベント発生時にはまだアクティブセルの移動が完了していない状態で、なぜアクティブセルの変更が発生したのか(例えばクリック操作や tab キー操作など)や移動前と移動先のセルなどを判断した上で、イベントをキャンセルさせることができます。
今回は Enter キー( KeyCode = 13 )押下によってアクティブセルの変更が行われようとしている場合にキャンセルさせることで下セル移動の組み込み動作を抑止しています。
[ASPX: イベント定義部分]
<Behaviors>
<ig:EditingCore>
<Behaviors>
<ig:CellEditing>
</ig:CellEditing>
</Behaviors>
</ig:EditingCore>
<ig:Activation>
<ActivationClientEvents ActiveCellChanging="WebDataGrid1_Activation_ActiveCellChanging" />
</ig:Activation>
</Behaviors>
[Javascript]
function WebDataGrid1_Activation_ActiveCellChanging(sender, eventArgs) {
// *****************************
// EnterKey押下時のデフォルト動作（下のセルに移動）をキャンセルさせる。
// *****************************
if (eventArgs.get_browserEvent().keyCode == 13) {
eventArgs.set_cancel(true);
}
}
続いて、次セルへ移動させる処理を記述していきます。
上記の ActiveCellChanging イベントでキャンセルの後に続けて次セルへ移動させる処理を記述しても動きそうなものですが、それでは最下行で Enter キーを押下した際に無反応のなってしまうため、KeuDown イベントをハンドリングします。
[ASPX: イベント定義部分]
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px">
<ClientEvents KeyDown="WebDataGrid1_Grid_KeyDown" />
[Javascript]
function WebDataGrid1_Grid_KeyDown(sender, eventArgs) {
// *****************************
// Enterキー押下時は右方向へ移動
// *****************************
// キーコードの判定()
if (eventArgs.get_browserEvent().keyCode == 13) {
eventArgs._cancel = true;
// Gridオブジェクトの取得
var grid = $find("WebDataGrid1");
//各情報の取得
var cell = grid.get_behaviors().get_activation().get_activeCell() //アクティブセル
var rowIndex = cell.get_row().get_index(); //アクティブ行のインデックス
var columnIndex = cell.get_column().get_index(); //アクティブ列のインデックス
var rowsCount = grid.get_rows()._rows.length; //総行数
var columnsCount = grid.get_columns()._items.length; //総列数
//各情報の取得
if (columnIndex < columnsCount - 1) {
//最終列以外の場合、一つ右へ移動
var cellnew = grid.get_rows().get_row(rowIndex).get_cell(columnIndex + 1);
grid.get_behaviors().get_activation().set_activeCell(cellnew);
}
else {
if (rowIndex < rowsCount - 1) {
//最終列でありかつ最終行ではないの場合、下の行の先頭セルへ移動
var cellnew = grid.get_rows().get_row(rowIndex+1).get_cell(0);
grid.get_behaviors().get_activation().set_activeCell(cellnew);
}
}
}
}
上記コードで行っていることは以下のとおりです。
・Enter キー押下の場合、アクティブセルの移動処理を行う。
・現在、最終列(最も右のセル)以外にフォーカスがある場合、一つ右のセルへ移動
・現在、最終列であり、かつ最終行ではない場合、下の行の先頭セルへ移動
以上で Enter キー押下時に下セルではなく次セルへ移動させることができるようになりました！
この方法を応用すれば他のキーが押された場合の動作や Shift キーが併せて押されていた場合の前セル移動など、いろいろと要件に合わせて作り込むことができます。
※今回のサンプルプロジェクトのダンロードは こちら から！
製品の評価版で試してみたい方は、こちらから
