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

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

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

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

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

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

@code {
    this.data = new List<T>
    {
        // ここにレコードを記述します
    };
}

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

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

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

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

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

API リファレンス

その他のリソース

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

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

• Grid Lite GitHub