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

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

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

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

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

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

    Note

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

    ヘッダー ナビゲーション

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

    キーの組み合わせ

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

    本体ナビゲーション

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

    キーの組み合わせ

    • 上矢印 - 1 つ上のセルへ移動 (ラッピングなし)
    • 下矢印 - 1 つ下のセルへ移動 (ラッピングなし)
    • 左矢印 - 1 つ左のセルへ移動 (行間のラッピングなし)
    • 右矢印 - 1 つ右のセルへ移動 (行間のラッピングなし)
    • Ctrl + 左矢印 - 行の左端のセルへ移動
    • Ctrl + 右矢印 - 行の右端のセルへ移動
    • Ctrl + 上矢印 - 列の最初のセルへ移動
    • Ctrl + 下矢印 - 列の最後のセルへ移動
    • Home - 行の左端のセルへ移動
    • End - 行の右端のセルへ移動
    • Ctrl + Home - グリッドの最も左上のデータ セルへ移動
    • Ctrl + End - グリッドの最も右下のデータ セルへ移動
    • Page Up - 1 ページ (ビューポート) 上へスクロール
    • Page Down - 1 ページ (ビューポート) 下へスクロール
    • Enter 編集モードに入る
    • F2 編集モードに入る
    • Esc 編集モードを終了する
    • Tab - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。行編集が有効な場合、フォーカスを編集可能な一番右のセルから CANCEL および DONE ボタンへ移動し、DONE ボタンから行の一番左の編集可能なセルへ移動します。
    • Shift + Tab - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。行編集が有効な場合、フォーカスを編集可能な一番右のセルから CANCEL および DONE ボタンへ移動し、DONE ボタンから行の一番右の編集可能なセルへ移動します。
    • Space - 行の選択が有効な場合、行を選択します。
    • Alt + 左矢印 または Alt + 上矢印 - グループ行はグループを縮小します。
    • Alt + 右矢印 または Alt + 下矢印 - グループ行はグループを展開します。
    • Alt + 左矢印 または Alt + 上矢印 - マスター/詳細行で詳細ビューを縮小します。
    • Alt + 右矢印 または Alt + 下矢印 - マスター/詳細行で詳細ビューを展開します。
    • Space - グループ行上 - rowSelection プロパティが複数に設定されている場合、グループ内のすべての行を選択します。

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

    デモ

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

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

    API 説明 引数
    gridKeydown 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの onkeydownイベントを使用します。 IGridKeydownEventArgs
    activeNodeChange アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。 IActiveNodeChangeEventArgs
    navigateTo 提供された rowindex と visibleColumnIndex に基づいてグリッド内の位置に移動します。{ targetType: GridKeydownTargetType, target: Object } タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
    grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });    		 rowindex: number, visibleColumnIndex: number, callback: ({ targetType: GridKeydownTargetType, target: Object }) => {}
    getNextCell rowIndex と visibileColumnIndex で次のセルを定義する ICellPosition オブジェクトを返します。コールバック関数は、getNextCell メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして IgxColumnComponent を受け取り、指定された条件が満たされた場合に boolean 値を返します:
    const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);    		 currentRowIndex: number, currentVisibleColumnIndex: number, callback: (IgxColumnComponent) => boolean
    getPreviousCell rowIndex と visibileColumnIndex で前のセルを定義する ICellPosition オブジェクトを返します。コールバック関数は、getPreviousCell メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして IgxColumnComponent を受け取り、指定された条件が満たされた場合に boolean 値を返します:
    const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);    		 currentRowIndex: number, currentVisibleColumnIndex: number, callback: (IgxColumnComponent) => boolean

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

    <igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" (gridKeydown)="customKeydown($event)">

    public customKeydown(args: IGridKeydownEventArgs) {
    const target: IgxGridCell = args.target as IgxGridCell;
    const evt: KeyboardEvent = args.event as KeyboardEvent;
    const type = args.targetType;

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

    IGridKeydownEventArgs 値に基づいて、独自のロジックを提供する 2つ のケースを識別しました (上記を参照)。API のメソッドを使用して、目的の処理を実行しましょう。ユーザーが編集モードでセル上で Tab キーを押している場合、入力の検証を実行します。ユーザーがセル上で Enter キーを押すと、次の行のセルへフォーカスを移動します。

        // 1. USER INPUT VALIDATON ON TAB
    if (target.column.dataType === 'number' && target.editValue < 10) {
        // alert the user that the input is invalid
        return;
    }
    // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
    this.grid1.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => {
            obj.target.activate();
        });
    Note

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

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

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

    デモ

    既知の制限

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

    API リファレンス

    その他のリソース

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