Blazor Operaciones de datos remotos de cuadrícula jerárquica

De forma predeterminada, utiliza IgbHierarchicalGrid su propia lógica para realizar operaciones de datos.

Puede realizar estas tareas de forma remota y alimentar los datos resultantes al IgbHierarchicalGrid aprovechando ciertas entradas y eventos, que son expuestos por el IgbHierarchicalGrid.

Remote Paging

Como Blazor Server ya es una instancia remota, a diferencia de las demos en las otras plataformas, no necesitamos establecer otra instancia remota para los datos, ya que los datos ya son remotos. Para hacer paginación remota, solo necesitamos establecer un par de métodos en la clase de datos

        public Task<List<NwindDataItem>> GetData(int index, int perPage)
        {
            var itemsToReturn = items.Skip(index).Take(perPage).ToList();
            return Task.FromResult(itemsToReturn);
        }

        public Task<int> GetDataLength()
        {
            return Task.FromResult(items.Count);
        }
razor

Después de declarar el servicio, debemos crear un componente, que será responsable de la construcción y la IgbHierarchicalGrid suscripción de datos.

Primero debemos cargar algunos datos en la cuadrícula. Es mejor hacerlo después de que la cuadrícula se haya renderizado para evitar problemas de tiempo.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Paginate(0, PerPage);
            totalRecordsCount = await NwindDataService.GetDataLength();
            StateHasChanged();
        }
    }
razor

Después de eso, solo necesitamos vincular los eventos de paginación a nuestros métodos personalizados, y se establece la paginación remota:

<IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount"></IgbPaginator>

....

@code {
        private async void OnPerPageChange(IgbNumberEventArgs e)
    {
        PerPage = e.Detail;
        await Paginate(0, e.Detail);
    }

    private async void OnPageChange(IgbNumberEventArgs e)
    {
        await Paginate(e.Detail, PerPage);
    }
    ...
        private async Task Paginate(double page, double perPage)
    {
        this.page = page;
        double skip = this.page * PerPage;
        double top = PerPage;

        try
        {
            data = await NwindDataService.GetData(Convert.ToInt32(skip), Convert.ToInt32(perPage));
            isLoading = false;
            UpdateUI();
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error fetching data: {ex.Message}");
        }
    }
}
razor

Para obtener más información, consulte la demostración completa a continuación:

Grid Remote Paging Demo

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Known Issues and Limitations

Cuando la grilla no tiene PrimaryKey configurada y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar y desplazar solicitudes de activación a un servidor remoto para recuperar los datos que se mostrarán en la grilla), una fila perderá el siguiente estado después de un dato. solicitud completa:

Selección de fila
Fila Expandir/contraer
Edición de filas
Fijación de filas

API References

Additional Resources

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