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

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

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

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

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

ヘッダー ナビゲーション

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 + ↓ - 列がまだ展開されていない場合、列グループヘッダーを展開します。

• SHIFT + ALT + ← groups the column, if the column is marked as groupable.

• SHIFT + ALT + → ungroups the column, if the column is marked as groupable.

• ALT + ← or ALT + ↑ collapses the column group header, if the header is not already collapsed.

• ALT + → or ALT + ↓ expands the column group header, if the header is not already expanded.

本体ナビゲーション

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 プロパティが複数に設定されている場合、グループ内のすべての行を選択します。

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

• ALT + → or ALT + ↓ - over Group Row - expands the group.

• ALT + ← or ALT + ↑ - over Master Detail Row - collapses the details view.

• ALT + → or ALT + ↓ - over Master Detail Row - expands the details view.

• SPACE - over Group Row - selects all rows in the group, if IgrGrid.rowSelection property is set to multiple.

Practice all of the above mentioned actions in the demo sample below. Focus any navigable grid element and a list with some of the available actions for the element will be shown to guide you through.

デモ

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

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

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

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

const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
  const args = eventArgs.detail;
  const target= args.target;
  const evt = args.event;
  const type = args.targetType;

  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
      // 1. USER INPUT VALIDATION ON TAB

  }
  if (type === '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;
    }

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

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

デモ

既知の問題と制限

API リファレンス

その他のリソース

• 仮想化とパフォーマンス
• フィルタリング
• ソート
• 集計
• 列の移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

• Ignite UI for React Forums
• Ignite UI for React GitHub