Blazor Grid セルの選択

Blazor Grid の Ignite UI for Blazor セル選択により、豊富なデータ選択機能が有効になり、IgbGrid コンポーネントで強力な API が提供されます。 Blazor Grid は、次の 3 つの選択モードをサポートしています。

Grid 複数セルの選択
Grid 単一選択
Grid 選択なし

これらの各オプションについて詳しく説明します。

Blazor セル選択の例

以下のサンプルは、IgbGrid の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。スナックバーのメッセージボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。

選択タイプ

Blazor Grid 複数セルの選択

セルの選択方法:

マウスドラッグ - セルの長方形データ選択。
Ctrl キー押下 + マウスドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
Shift キーを押しながら 矢印 キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Ctrl キーを押しながら Ctrl + ↑ ↓ ← → キーと Ctrl + Home / End を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Ctrl キーを押しながら左マウス キーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

デモ

Grid 単一選択

CellSelection を single (単一) に設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、マウスドラッグ モードは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。

選択モードが single (単一) であるか multiple (複数) であるかに関係なく、単一セルが Selected イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると RangeSelected イベントが発生します。

Grid 選択なし

セルの選択を無効にする場合は、CellSelection を none (なし) に設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。

キーボードナビゲーションのインタラクション

Shift キーが押されている間

Shift + ↑ - 現在の選択範囲に上のセルを追加します。
Shift + ↓ - 現在の選択範囲に下のセルを追加します。
Shift + ← - 現在の選択に左のセルを追加します。
Shift + → - 現在の選択範囲に右のセルを追加します。

Ctrl + Shift キーが押されている間

Ctrl + Shift + ↑ - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
Ctrl + Shift + ↓ - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
Ctrl + Shift + ← - 行の先頭まですべてのセルを選択します。
Ctrl + Shift + → - 行末まですべてのセルを選択します。
Ctrl + Shift + Home - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。
Ctrl + Shift + End - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。

[!Note] 連続スクロールは、グリッド本体でのみ可能です。

API の使用

以下は、範囲の選択、選択の解除、または選択したセルデータを取得する方法です。

範囲の選択

SelectRange - API を使用してセル範囲を選択します。rowStart と rowEnd は行インデックスを使用する必要があり、columnStart と columnEnd は列インデックスまたは列データフィールド値を使用することができます。

<IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>

@code {
    private IgbGrid grid;

    private async void SetSelection()
    {        
        IgbGridSelectionRange selectionRange = new IgbGridSelectionRange();
        selectionRange.ColumnStart = 1;
        selectionRange.ColumnEnd = 1;
        selectionRange.RowStart = 2;
        selectionRange.RowEnd = 2;

        this.grid.SelectRange(new IgbGridSelectionRange[] {});
    }
}

セル選択のクリア

ClearCellSelection は現在のセル選択をクリアします。

@code {
    private async void ClearSelection()
    {
        await this.grid.ClearCellSelectionAsync();
    }
}

選択したデータの取得

GetSelectedData は、選択されたデータの配列をディクショナリで返します。以下は例です。

<IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>

@code {
    private IgbGrid grid;

    private async void GetSelectedData()
    {
        object[] data = await this.grid.GetSelectedDataAsync(true, true);
    }
}

機能の統合

マルチセル選択はインデックスベースです (DOM 要素選択)。

Sorting - ソートが実行されると、選択は解除されません。昇順または降順でソートしている間、現在選択されているセルはそのままになります。昇順または降順でソートしている間、現在選択されているセルはそのままになります。
Paging - ページング時に選択されたセルはクリアされます。選択はページを超えては持続されません。選択はページを超えては持続されません。
Filtering - フィルタリングが実行されると、選択は解除されません。フィルタリングがクリアされている場合は、最初に選択されたセルが返されます。
Resizing - 列のサイズを変更すると、選択したセルはクリアされません。
Hiding - 選択したセルはクリアされません。列が非表示の場合は、次に表示されている列のセルが選択されます。
Pinning - 選択したセルはクリアされません。非表示と同じです。
GroupBy - 列をグループ化すると、選択したセルはクリアされません。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgbGrid Class="grid"></IgbGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-cell-selected-text-color: #FFFFFF;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062A3;
}

デモ

API リファレンス

IgbGrid

その他のリソース

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