Blazor Operações de Dados Remotos de Grade Hierárquica

Por padrão, o usa IgbHierarchicalGrid sua própria lógica para executar operações de dados.

Você pode executar essas tarefas remotamente e alimentar os dados resultantes para o IgbHierarchicalGrid aproveitando certas entradas e eventos, que são expostos pelo IgbHierarchicalGrid.

Remote Paging

Como Blazor Server já é uma instância remota, ao contrário das demos nas outras plataformas, não precisamos definir outra instância remota para os dados, pois os dados já são remotos. Para fazer a paginação remota, só precisamos definir alguns métodos na classe de dados

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

Após declarar o serviço, precisamos criar um componente, que será responsável pela construção e assinatura de IgbHierarchicalGrid dados.

Primeiro, devemos carregar alguns dados na grade. É melhor fazer isso depois que a grade for renderizada para evitar problemas de tempo.

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

Depois disso, só precisamos vincular os eventos de paginação aos nossos métodos personalizados e a paginação remota é definida:

<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 mais referências, verifique a demonstração completa abaixo:

Grid Remote Paging Demo

Known Issues and Limitations

Quando a grade não tiver nenhuma PrimaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitações de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:

Seleção de linha
Expandir/recolher linha
Edição de linha
Fixação de linha

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.