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

    Un servicio proporciona datos al componente cuando se carga la página y cuando se utiliza el controlador deslizante para recuperar una cierta cantidad de registros. Mientras que en un escenario real los datos actualizados se consumirían desde el servicio, aquí los datos se actualizan en código. Esto se hace para mantener la demostración simple y enfocarse en su objetivo principal: demostrar el rendimiento de la red.

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

    Un cambio en el valor del campo de datos o un cambio en el objeto de datos/referencia de recopilación de datos activará las canalizaciones correspondientes. Sin embargo, este no es el caso de las columnas, que están vinculadas a objetos de datos complejos. Para resolver la situación, proporcione una nueva referencia de objeto para el objeto de datos que contiene la propiedad. Ejemplo:

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

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

    Plantillas

    La actualización de la vista funciona de la misma manera para columnas con una plantilla predeterminada y para columnas con una plantilla personalizada. Sin embargo, se recomienda mantener las plantillas personalizadas relativamente simples. A medida que crece el número de elementos en la plantilla, también aumenta el impacto negativo en el rendimiento.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.