Web Components Tree Grid のライブデータ更新

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

Web Components ライブデータ更新の例

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

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

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

<igc-tree-grid id="grid1"></igc-tree-grid>

public startUpdate() {
    const frequency = (document.getElementById('frequency') as IgcSliderComponent).value;
    this._timer = setInterval(() => {
        this.grid1.data = FinancialData.updateAllPrices(this.data);
    }, frequency);
    (document.getElementById('startButton') as IgcButtonComponent).disabled = true;
    (document.getElementById('stopButton') as IgcButtonComponent).disabled = false;
    (document.getElementById('chartButton') as IgcButtonComponent).disabled = true;
}

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

<igc-tree-grid id="grid1">
    <igc-column field="price.usd"></igc-column>
</igc-tree-grid>

private updateData(data: any[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    this.grid.data = newData;
}

テンプレート

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

API リファレンス

IgcTreeGridComponent
Cell

その他のリソース

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

Web Components Tree Grid のライブ データ更新