Blazor Tree Grid キーボード ナビゲーション

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

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

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

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

ヘッダー ナビゲーション

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

キーの組み合わせ

• ↑ - ヘッダーで 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 + → 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.

本体ナビゲーション

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

キーの組み合わせ

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

  collapses the current node.

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

  expands the current node.

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 イベントのイベント ハンドラーを登録する必要があります。

<IgbTreeGrid Id="grid1" PrimaryKey="ProductID" GridKeydownScript="WebGridCustomKBNav">
</IgbTreeGrid>

// In JavaScript
igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
    const args = evtArgs.detail;
    const target = args.target;
    const evt = args.event;
    const type = args.targetType;
    const grid = document.getElementById("grid1");

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

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

// In JavaScript
igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
    const args = evtArgs.detail;
    const target = args.target;
    const evt = args.event;
    const type = args.targetType;
    const grid = document.getElementById("grid1");

    // 1. USER INPUT VALIDATION 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
    grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => {
            obj.target.activate();
    });
}, false);

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

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

デモ

既知の問題と制限

API リファレンス

その他のリソース

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

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub