Blazor Grid の行操作

Blazor Grid の Ignite UI for Blazor 行操作機能を使用すると、開発者は IgbActionStrip を使用し、行/セルコンポーネントと行のピン固定に CRUD を利用できます。これらの操作 (編集とピン固定) には、IgbGrid の特定の行に適用できる事前定義された UI コントロールがいくつかあります。

使用方法

事前定義された操作 (actions) UI コンポーネントは次のとおりです:

IgbGridEditingActions - IgbGrid 編集専用に設計された機能と UI を含みます。RowEditable オプションと IgbGrid の行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。
IgbGridPinningActions - IgbGrid ピン固定専用に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。

これらは IgbGrid 内に追加され、デフォルトのインタラクションを提供する IgbActionStrip プを持つために必要です。

<IgbGrid Data=northwindEmployees RowEditable="True" PrimaryKey="ID">
    @foreach (var c in columns)
    {
        <IgbColumn Field="@c.Field">
        </IgbColumn>
    }
    <IgbActionStrip @ref=actionstrip>
        <IgbGridPinningActions></IgbGridPinningActions>
        <IgbGridEditingActions></IgbGridEditingActions>
    </IgbActionStrip>
</IgbGrid>

[!Note] ActionStripComponent が IgbGrid の子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。

カスタムの実装

これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで IgbActionStrip を使用する場合、アイコンでボタンコンポーネントを作成します。そして、クリックイベントを追加し、IgbActionStrip に挿入します。

<div class="grid__wrapper">
    <IgbGrid Data=northwindEmployees>
        <IgbActionStrip @ref=actionstrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbButton Title="Edit" @onclick="() => StartEdit(actionstrip.Context)">
                <IgbIcon>edit</IgbIcon>
            </IgbButton>
            @if (!IsDeleted(actionstrip.Context))
            {
                <IgbButton Title="Delete" @onclick="() => Delete(actionstrip.Context)">
                    <IgbIcon>delete</IgbIcon>
                </IgbButton>
            }
        </IgbActionStrip>
    </IgbGrid>
</div>

API リファレンス

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