Blazor Grid Lite データ バインディング

Grid Lite は、データ ソースとして List<TItem> などの IEnumerable<TItem> を受け入れます。TItem はモデルを表します。各グリッド行はコレクション内のデータ レコードをレンダリングしたもので、行のセルは列の構成に基づいて制御されます。

データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。

実行時にデータ ソースを変更する

コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースのデータ構造 (フィールド構成) が以前のものと異なる場合は、列の構成も必ず更新してください。

<IgbGridLite Data="data">
    <!-- 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 -->
    <IgbGridLiteColumn Field="Id" />
</IgbGridLite>

@code {
    private List<Product> data = new();

    private void UpdateData()
    {
        // 新しいコレクションを割り当てます
        data = new List<Product>
        {
            // ここにレコードを記述します
        };
    }
}

グリッドで AutoGenerate が有効になっている場合、データが変更されると新しい列の構成が自動的に推論されます。

<IgbGridLite Data="data" AutoGenerate="true" />

@code {
    private List<Product> data = new();

    private void UpdateData()
    {
        // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
        data = new List<Product>();
    }
}

通常は ClearSortAsync() または ClearFilterAsync() を呼び出して、これらの状態をリセットすることをお勧めします。

以下のサンプルでは、グリッドで列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。

API リファレンス

その他のリソース

• 列の構成
• ソート
• フィルタリング
• テーマ設定とスタイル設定

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

• Grid Lite GitHub