Blazor Grid 選択の概要

Blazor Grid の Ignite UI for Blazor 選択機能を使用すると、単純なマウス操作を使用してデータを簡単に操作および操作できます。使用可能な選択モードは 3 つあります。

• 行の選択
• セルの選択
• 列の選択

RowSelection プロパティを使用すると、以下を指定できます。

• None (なし)
• Single (単一)
• Multiple Select (複数選択)

Blazor Grid 選択の例

以下のサンプルは、IgbGrid の 3 種類のセル選択動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。

Blazor Grid 選択のオプション

Ignite UI for Blazor IgbGrid コンポーネントは、行選択、セル選択、列選択の 3 つの選択モードを提供します。デフォルトでは、IgbGrid で複数セル選択モードのみが有効になっています。選択モードの変更または有効化は、RowSelection、CellSelection または Selectable プロパティを使用します。

Blazor Grid 行選択

プロパティ RowSelection を使用すると、次のオプションを指定できます。

• None - IgbGrid の行選択が無効になります。
• Single - IgbGrid 内の 1 行のみの選択が利用可能になります。
• Multiple - 複数行の選択は、Ctrl + クリック、Space キー を押して行セレクターを使用することにより、複数行の選択が可能になります。

詳細については、行選択トピックを参照してください。

Blazor Grid セル選択

以下のオプションは、プロパティ CellSelection で指定できます。

• None - IgbGrid のセル選択が無効になります。
• Single - IgbGrid 内の 1 セルのみの選択が利用可能になります。
• Multiple - IgbGrid の選択のデフォルト状態です。複数セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。

詳細については、セル選択トピックを参照してください。

Blazor Grid 列選択

Selectable プロパティを使用して、IgbColumn ごとに以下のオプションを指定できます。このプロパティが true または false に設定されている場合、対応する列の選択がそれぞれ有効または無効になります。

以下の 3 つのバリエーションがあります。

• Single selection (単一選択) - 列セルをマウス クリックします。
• Multi column selection (複数列の選択) - Ctrl キーを押しながら列セルをマウス クリックします。
• Range column selection (列の範囲選択) - Shift キーを押しながら + マウス クリック、その間のすべての列が選択されます。

詳細については、列選択トピックを参照してください。

Blazor Grid コンテキスト メニュー

ContextMenu イベントは、カスタム コンテキスト メニューを追加して、IgbGrid での作業をアシストします。グリッドの本体を右クリックすると、イベントはトリガーされたセルを放出します。コンテキスト メニューは、放出されたセルで動作します。

複数セルの選択がある場合、選択したセルが複数セルの選択領域にあるかどうかをチェックするロジックを配置します。その場合、選択したセルの値も出力します。

基本的に、メイン関数は次のようになります。

    public void RightClick(MouseEventArgs e)
    {
        this.MenuX = e.ClientX + "px";
        this.MenuY = e.ClientY + "px";
    }


    public void onMenuShow(IgbGridCellEventArgs e)
    {
        IgbGridCellEventArgsDetail detail = e.Detail;
        this.ShowMenu = true;
        this.ClickedCell = detail.Cell;
    }

以下はコンテキストメニューの機能です。

• 選択したセルの value のコピー。
• 選択したセルの dataRow のコピー。
• 選択したセルが複数セルの選択範囲内にある場合、選択したすべてのデータをコピーします。

    public void CopyCellData()
    {
        this.ShowMenu = false;
        this.SelectedData = this.ClickedCell.Value.ToString();
        StateHasChanged();
    }


    public async void CopyRowData()
    {
        this.ShowMenu = false;
        NwindDataItem rowData = this.NwindData.ElementAt(this.ClickedCell.Id.RowIndex);
        this.SelectedData = JsonConvert.SerializeObject(rowData);
        StateHasChanged();
}

    public async void CopyCellsData()
    {
        this.ShowMenu = false;
        var selectedData = await this.grid.GetSelectedDataAsync(true, false);
        this.SelectedData = JsonConvert.SerializeObject(selectedData);
        StateHasChanged();
    }

IgbGrid はコピーされたデータを取得し、コンテナ要素に貼り付けます。

グリッドとコンテキスト メニューを組み合わせるために使用するテンプレート:

<div class="container vertical">
    <div class="wrapper" oncontextmenu="event.preventDefault()">
        <IgbGrid AutoGenerate="false"
                 CellSelection="GridSelectionMode.Multiple"
                 ContextMenu="onMenuShow"
                 @oncontextmenu="RightClick"
                 Name="grid"
                 @ref="grid"
                 Data="NwindData">
            <IgbColumn Field="ProductID"
                       Header="Product ID">
            </IgbColumn>

            <IgbColumn Field="ProductName"
                       Header="Product Name">
            </IgbColumn>

            <IgbColumn Field="UnitsInStock"
                       Header="Units In Stock"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="UnitPrice"
                       Header="Units Price"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="Discontinued"
                       DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn Field="OrderDate"
                       Header="Order Date"
                       DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbGrid>
        <div class="selected-data-area">
            @SelectedData
        </div>
        </div>
        @if (ShowMenu)
        {
            <div id="menu" class="contextmenu" style="left: @MenuX; top: @MenuY">
                <span id="copySingleCell" class="item" @onclick="CopyCellData">
                    <IgbIcon @ref=icon IconName="content_copy" Collection="material"></IgbIcon>Copy Cell Data
                </span>
            <span id="copyRow" class="item" @onclick="CopyRowData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Row Data
                </span>
            <span id="copyMultiCells" class="item" @onclick="CopyCellsData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Cells Data
                </span>
            </div>
        }
</div>

複数のセルを選択し、マウスの右ボタンを押します。コンテキストメニューが表示され、セル データのコピー を選択すると、選択したデータが右側の空のボックスに表示されます。

結果:

既知の問題と制限

グリッドに PrimaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合）、データ要求が完了すると、行は次の状態を失います:

• 行の選択
• 行の展開/縮小
• 行の編集
• 行のピン固定

API リファレンス

• IgbGrid

その他のリソース

• 行の選択
• セルの選択
• ページング
• フィルタリング
• ソート
• 集計
• 列の移動
• 仮想化とパフォーマンス

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

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)