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

    Por defecto, utilizaIgbHierarchicalGrid su propia lógica para realizar operaciones de datos.

    Puedes realizar estas tareas de forma remota y alimentar los datosIgbHierarchicalGrid resultantes aprovechando ciertas entradas y eventos que son expuestos por elIgbHierarchicalGrid.

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

    Después de declarar el servicio, necesitamos crear un componente que será responsable de laIgbHierarchicalGrid construcción y la 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();
        }
    }

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

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

    Grid Remote Paging Demo

    Known Issues and Limitations

    • Cuando la cuadrícula noPrimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:

    • 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.