Blazor Grid のライブ データ更新

    Blazor Grid の Ignite UI for Blazor ライブ データ更新機能は、グリッド内に表示されるデータのリアルタイムまたはほぼリアルタイムの更新を可能にするために使用されます。これは、株式市場のトラッカー、ライブ スポーツ スコア、IoT (Internet of Things) ダッシュボードなど、データが常に変化するアプリで非常に役立ちます。IgbGrid は、ユーザーの操作に応答し続けている間、1 秒あたり数千の更新を処理できます。

    Blazor ライブ データ更新の例

    以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の Grid のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。 同じデータを縦棒チャートに入力して、Ignite UI for Angular の強力なチャート作成機能を体験してください。Chart ボタンには、選択した行の Category Prices per Region データが表示され、Chart 列ボタンには現在の行の同じデータが表示されます。

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    データ バインディングおよび更新

    サービスは、ページが読み込まれたとき、およびスライダー　コントローラーを使用して特定の数のレコードを取得したときに、コンポーネントにデータを提供します。実際のシナリオでは、更新されたデータはサービスから消費されますが、ここではデータはコードで更新されます。これは、デモをシンプルに保ち、その主な目標であるグリッドのパフォーマンスを実証するために行われます。

    <IgbGrid Id="grid1" @ref="grid1"><IgbGrid>
Razor
    public void OnStart()
{
    this.StartButton.Disabled = true;
    this.ShowChartButton.Disabled = true;
    this.StopButton.Disabled = false;
    var startTimeSpan = TimeSpan.Zero;
    var periodTimeSpan = TimeSpan.FromMilliseconds(Frequency);

    this.Timer = new System.Threading.Timer((e) =>
    {
        grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);
    }, null, startTimeSpan, periodTimeSpan);
}
razor

    データ フィールド値の変更またはデータ オブジェクト/データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは複合データ オブジェクトにバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:

    <IgbGrid>
    <IgbColumn Field="price.usd"></IgbColumn>
</IgbGrid>
Razor
     grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);
razor

    テンプレート

    ビューの更新は、デフォルト テンプレートの列とカスタム テンプレートの列で同じように機能します。ただし、カスタム テンプレートは比較的単純にしておくことをお勧めします。テンプレート内の要素の数が増えると、パフォーマンスへの悪影響も大きくなります。

    API リファレンス

    その他のリソース

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