Web Components Grid Live Data Updates

The Ignite UI for Web Components Live Data Updates feature in Web Components Grid is used for enabling real-time or near-real-time updates of data displayed within the grid. This is extremely useful in apps where data is constantly changing, like stock market trackers, live sports scores, or IoT (Internet of Things) dashboards. The IgcGridComponent can handle thousands of updates per second, while staying responsive for user interactions.

Web Components Live-data Update Example

The sample below demonstrates the Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the Column Chart to experience the powerful charting capabilities of Ignite UI for Angular. The Chart button will show Category Prices per Region data for the selected rows and the Chart column button will show the same for the current row.

Data binding and updates

서비스는 페이지가 로드될 때와 슬라이더 컨트롤러를 사용하여 특정 수의 레코드를 가져올 때 구성 요소에 데이터를 제공합니다. 실제 시나리오에서는 업데이트된 데이터가 서비스에서 사용되지만 여기서는 데이터가 코드에서 업데이트됩니다. 이는 데모를 단순하게 유지하고 주요 목표인 그리드 성능 시연에 초점을 맞추기 위해 수행됩니다.

<igc-grid id="grid1"></igc-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-grid id="grid1">
    <igc-column field="price.usd"></igc-column>
</igc-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 References

IgcGridComponent

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.