Blazor グリッド セルのアクティブ化

Ignite UI for Blazor Data Table / Data Grid は、グリッドのセルを介したキーボードナビゲーションを可能にするセルアクティベーション機能をサポートします。これは、グリッドの ActivationMode プロパティを Cell に設定することによってアクティブになります。

Blazor グリッド セルのアクティブ化の例

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

グリッドの ActivationMode プロパティを Cell に設定すると、データ グリッド内のさまざまなキーボードナビゲーションオプションが有効になります。以下は、現在押下されているセルに対する各キーの押下/組み合わせとそれらが持つ効果についての説明です。

  • 上矢印キー: 1 つ上のセルに移動します。
  • 下矢印キー: 1 つ下のセルに移動します。
  • 左矢印キー: 現在の行でセルを 1 つ左に移動します。
  • 右矢印キー 現在の行でセルを 1 つ右に移動します。
  • Page Up: グリッドを 1 ビューポート ページ上にスクロールします。
  • Page Down: グリッドを 1 ビューポート ページ下にスクロールします。
  • Tab: アクティブ セルを右の以下のセルに移動するか、その行の最後のセルに達した場合、以下の行の一番左のセルに移動します。
  • Shift + Tab: アクティブセルを左の以下のセルに移動するか、またはその行の最初のセルに達した場合、前の行の一番右のセルに移動します。
  • Ctrl + 上矢印キー: 列の一番上のセルに移動します。
  • Ctrl + 下矢印キー: 列の一番下のセルに移動します。
  • Ctrl + 左矢印キー: 列の一番左のセルに移動します。
  • Ctrl + 右矢印キー: 列の一番右のセルに移動します。
  • Ctrl + Home: グリッド内の左上のセルに移動します。
  • Ctrl + End: グリッド内の右下のセルに移動します。

コード スニペット

以下は、Blazor データ グリッドでセルのアクティブ化を実装する方法を示しています。

<DataGrid Height="100%" Width="100%"
    DataSource="DataSource"          
    ActivationMode="GridActivationMode.Cell" />