React Grid のライブ データ更新
React Grid の Ignite UI for React ライブ データ更新機能は、グリッド内に表示されるデータのリアルタイムまたはほぼリアルタイムの更新を可能にするために使用されます。これは、株式市場のトラッカー、ライブ スポーツ スコア、IoT (Internet of Things) ダッシュボードなど、データが常に変化するアプリで非常に役立ちます。IgrGrid
は、ユーザーの操作に応答し続けている間、1 秒あたり数千の更新を処理できます。
React ライブ データ更新の例
以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の Grid のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。
同じデータを縦棒チャートに入力して、Ignite UI for Angular の強力なチャート作成機能を体験してください。Chart
ボタンには、選択した行の Category Prices per Region データが表示され、Chart
列ボタンには現在の行の同じデータが表示されます。
データ バインディングおよび更新
サービスは、ページが読み込まれたとき、およびスライダー コントローラーを使用して特定の数のレコードを取得したときに、コンポーネントにデータを提供します。実際のシナリオでは、更新されたデータはサービスから消費されますが、ここではデータはコードで更新されます。これは、デモをシンプルに保ち、その主な目標であるグリッドのパフォーマンスを実証するために行われます。
<IgrGrid id="grid1"></IgrGrid>
function startUpdate(frequency) {
const timer = setInterval(() => {
setData(prevData => FinancialDataClass.updateRandomPrices(prevData));
}, frequency);
setStartButtonDisabled(true);
setShowChartButtonDisabled(true);
setStopButtonDisabled(false);
}
データ フィールド値の変更またはデータ オブジェクト / データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは、複雑なデータ オブジェクトにバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
<IgrGrid id="grid1">
<IgrColumn field="price.usd"></IgrColumn>
</IgrGrid>
private updateData(data: any[]) {
const newData = []
for (const rowData of data) {
rowData.price = { usd: getUSD(), eur: getEUR() };
newData.push({...rowData});
}
gridRef.current.data = newData;
}
テンプレート
ビューの更新は、デフォルト テンプレートの列とカスタム テンプレートの列で同じように機能します。ただし、カスタム テンプレートは比較的単純にしておくことをお勧めします。テンプレート内の要素の数が増えると、パフォーマンスへの悪影響も大きくなります。
API リファレンス
IgrGrid
Cell
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。