Blazor Grid Live Data Updates

    The Ignite UI for Blazor Live Data Updates feature in Blazor 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 IgbGrid can handle thousands of updates per second, while staying responsive for user interactions.

    Blazor 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

    Um serviço fornece dados ao componente quando a página é carregada e quando o controlador deslizante é usado para buscar um determinado número de registros. Enquanto em um cenário real os dados atualizados seriam consumidos do serviço, aqui os dados são atualizados no código. Isso é feito para manter a demonstração simples e focar em seu objetivo principal - demonstrar o desempenho da grade.

    <IgbGrid Id="grid1" @ref="grid1"><IgbGrid>

    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);
}

    Uma alteração no valor do campo de dados ou uma alteração no objeto de dados/referência de coleta de dados acionará os pipes correspondentes. No entanto, esse não é o caso de colunas, que são associadas a objetos de dados complexos. Para resolver a situação, forneça uma nova referência de objeto para o objeto de dados que contém a propriedade. Exemplo:

    <IgbGrid>
    <IgbColumn Field="price.usd"></IgbColumn>
</IgbGrid>

     grid1.Data = this.FinancialDataClass.UpdateRandomPrices(this.CurrentStocks);

    Modelos

    A atualização do modo de exibição funciona da mesma maneira para colunas com um modelo padrão e para colunas com um modelo personalizado. No entanto, é recomendável manter os modelos personalizados relativamente simples. À medida que o número de elementos no modelo aumenta, o impacto negativo no desempenho também aumenta.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.