React Grid キーボードナビゲーション

React Grid の Ignite UI for React キーボードナビゲーションは、さまざまなキーボード操作をユーザーに提供します。これにより IgrGrid のアクセシビリティが向上し、内部の要素 (セル、行、列ヘッダー、ツールバー、フッターなど) をナビゲートできるようになります。この機能はデフォルトで有効になっています。デフォルトの動作を簡単にオーバーライドするオプションがあります。

IgrGrid のタブが削減され、ナビゲーションが W3C のアクセシビリティ標準に準拠し、使いやすくなりました。

現在、IgrGrid には以下のタブ位置が導入されています。

グループ化またはツールバーの領域 (有効な場合)
Grid ヘッダー
Grid 本体
列の集計 (有効な場合)
Grid ページネーター (有効な場合)

[!Note] この変更のため、Tab と Shift + Tab キーでセル間を移動することは IgrGrid でサポートされなくなりました。 Tab キーを押すと、グループ化 / ツールバー -> ヘッダー -> 本体 -> 集計 -> フッター/ページネーターの順序にタブ位置を移動します。

[!Note] テンプレートによっフォーカス可能な要素を IgrGrid の本体に公開すると、ブラウザのデフォルトの動作が防止されていないため、予期されない結果が発生する可能性があります。したがって、それを適切に防止/変更するのは開発者の責任です。

ヘッダーナビゲーション

IgrGrid ヘッダーのキーボードナビゲーションが完全にサポートされるようになりました。列ヘッダーは矢印キーで簡単にトラバースできます。さらに、フィルタリング、ソート、グループ化などの列操作をトリガーするキーの組み合わせがいくつかあります。 IgrGrid ヘッダーコンテナーがフォーカスされている場合、以下のキー組み合わせを使用できます。

キーの組み合わせ

↑ - ヘッダーで 1 つ上のセルへ移動 (ループなし)複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
↓ - ヘッダーの 1 つ下のセルに移動 (ラッピングなし)複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
← - 1 つ左のセルへ移動 (ループなし)
→ - 1 つ右のセルへ移動 (行間のラッピングなし)
Ctrl + ← - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
Home - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
Ctrl + → - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
End - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
Alt + L - 詳細フィルタリングが有効な場合、詳細フィルタリングダイアログを開きます。
Ctrl + Shift + L - 列がフィルター可能な場合、Excel スタイルフィルターまたはデフォルト (行) フィルターを開きます。
Ctrl + ↑ - アクティブな列ヘッダーを昇順にソートします。列が昇順で既にソートされている場合、ソート状態を削除します。
Ctrl + ↓ - アクティブな列ヘッダーを降順にソートします。列が降順で既にソートされている場合、ソート状態を削除します。
Space - 列を選択します。列がすでに選択されている場合、選択を解除します。

Shift + Alt + ← - 列がグループ化可能としてマークされている場合、列をグループ化します。

Shift + Alt + → - 列がグループ化可能としてマークされている場合、列のグループ化を解除します。
Alt + ← または Alt + ↑ - 列が縮小されていない場合、列グループヘッダーを縮小します。
Alt + → または Alt + ↓ - 列がまだ展開されていない場合、列グループヘッダーを展開します。

本体ナビゲーション

IgrGrid 本体がフォーカスされている場合、以下のキー組み合わせを使用できます。

キーの組み合わせ

↑ - 1 つ上のセルへ移動。
↓ - 1 つ下のセルへ移動。

← - 1 つ左のセルへ移動 (行間のラッピングなし)
→ - 1 つ右のセルへ移動 (行間のラッピングなし)
Ctrl + ← - 行の左端のセルへ移動
Ctrl + → - 行の右端のセルへ移動
Ctrl + ↑ - 列の最初のセルへ移動
Ctrl + ↓ - 列の最後のセルへ移動
Home - 行の左端のセルへ移動
End - 行の右端のセルへ移動
Ctrl + Home - グリッドの最も左上のデータセルへ移動
Ctrl + End - グリッドの最も右下のデータセルへ移動
Page Up - 1 ページ (ビューポート) 上へスクロール
Page Down - 1 ページ (ビューポート) 下へスクロール
Enter - 編集モードに入る
F2 - 編集モードに入る
Esc - 編集モードを終了する
Tab - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。行編集が有効な場合、フォーカスを編集可能な一番右のセルから [キャンセル] および [完了] ボタンへ移動し、[完了] ボタンから行の一番左の編集可能なセルへ移動します。
Shift + Tab - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。行編集が有効な場合、フォーカスを編集可能な一番右のセルから [キャンセル] および [完了] ボタンへ移動し、[完了] ボタンから行の一番右の編集可能なセルへ移動します。
Space - 行の選択が有効な場合、行を選択します。
Alt + ← または Alt + ↑ -

グループ行はグループを縮小します。

Alt + → または Alt + ↓ - グループ行はグループを展開します。

Alt + ← または Alt + ↑ - マスター/詳細行で詳細ビューを縮小します。
Alt + → または Alt + ↓ - マスター/詳細行で詳細ビューを展開します。
Space - グループ行上 - RowSelection プロパティが複数に設定されている場合、グループ内のすべての行を選択します。

以下のデモサンプルで上記のすべての操作を実行できます。ナビゲーション可能なグリッド要素をフォーカスすると、利用可能な操作のリストが表示されます。

デモ

カスタムキーボードナビゲーション

特定のキーまたはキーの組み合わせのデフォルトの動作をオーバーライドすることができるは、キーボードナビゲーション機能の利点の 1 つです。たとえば、Enter キーまたは Tab キーを押して次のセルまたは下のセルへ移動します。この以外のナビゲーションシナリオでも、Keyboard Navigation API で簡単に実現できます。

API を使用して、ユーザー入力の検証やカスタムナビゲーションなどの一般的なシナリオを実現する方法を示します。最初に、GridKeydown イベントのイベントハンドラーを登録する必要があります。

<IgrGrid id="grid1" primaryKey="ProductID" gridKeydown={customKeydown}>
</IgrGrid>

constructor() {
        var grid = this.grid = document.getElementById('grid') as IgrGridComponent;
		grid.data = this.data
		grid.addEventListener("gridKeydown", this.customKeydown);
	}

function customKeydown(s: IgrGridBaseDirective, e: IgrGridKeydownEventArgs) {
  const detail = e.detail
  const target= detail.target;
  const evt = detail.event;
  const type = detail.targetType;

  if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
      // 1. USER INPUT VALIDATION ON TAB
      
  }
  if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
      // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS

  }
}

イベント引数の値に基づいて、独自のロジックを提供する 2 つのケースを特定しました (上記を参照)。API のメソッドを使用して、目的の処理を実行しましょう。ユーザーが編集モードのセル上で Tab キーを押すと、入力の検証を実行します。

    // 1. USER INPUT VALIDATION ON TAB
    if (target.column.dataType === 'number' && target.editValue < 10) {
        // alert the user that the input is invalid
        return;
    }

[!Note] 実装の詳細は、サンプルコードを参照してください。

実装したカスタムシナリオを試すには以下のデモを使用してください。

数値列のセルをダブルクリックするか F2 キーを押し、値を 7 に変更して Tab キーを押します。プロンプトメッセージが表示されます。
セルを選択して Enter キーを数回押します。キーを押すたびに、同じ列の下にある次の行のセルへフォーカスを移動します。

デモ

既知の問題と制限

制限	説明
スクロール可能な親コンテナーを使用してグリッド内を移動します。	グリッドがスクロール可能な親コンテナー内に配置され、ユーザーが表示されていないグリッドのセルへ移動した場合、親コンテナーはスクロールされません。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

React Grid キーボード ナビゲーション

ヘッダー ナビゲーション

キーの組み合わせ

本体ナビゲーション

キーの組み合わせ

デモ

カスタム キーボード ナビゲーション

デモ

既知の問題と制限

その他のリソース

React Grid キーボードナビゲーション

ヘッダーナビゲーション

カスタムキーボードナビゲーション