Blazor Grid Remote Data Operations

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

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

Infinite Scroll

Um design popular para cenários que exigem a busca de dados por partes de um ponto final é a chamada rolagem infinita. Para grades de dados, é caracterizado pelo aumento contínuo dos dados carregados acionados pela rolagem do usuário final até a parte inferior. Os próximos parágrafos explicam como você pode usar a API disponível para obter facilmente a rolagem IgbGrid infinita.

Para implementar a rolagem infinita, você precisa buscar os dados em pedaços. Os dados que já foram buscados devem ser armazenados localmente e você deve determinar o comprimento de um pedaço e quantos pedaços existem. Você também precisa acompanhar o último índice de linha de dados visível na grade. Dessa forma, usando as StartIndex propriedades e ChunkSize, você pode determinar se o usuário rola para cima e você precisa mostrar a ele os dados já buscados ou rolar para baixo e buscar mais dados do ponto final.

A primeira coisa a fazer é buscar o primeiro pedaço dos dados. Definir a TotalItemCount propriedade é importante, pois permite que a grade dimensione sua barra de rolagem corretamente.

@code {
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var grid = this.grid;
                grid.IsLoading = true;
                double dataViewSize = 480.0 / 50.0;
                this.PageSize = Convert.ToInt32(Math.Floor(dataViewSize * 1.5));
                var data = await GetDataRemote(1, this.PageSize);
                this.CachedData = data;
                this.LocalData = this.CachedData;
                grid.TotalItemCount = (this.PageSize * this.Page) + 1;
                double pageCount = Math.Ceiling((double)this.TotalItems / (double)this.PageSize);
                this.TotalPageCount = (int)pageCount;
                grid.IsLoading = false;
                StateHasChanged();
            }

        }
}

Além disso, você precisa assinar a DataPreLoad saída, para que possa fornecer os dados necessários para a grade quando ela tentar exibir uma parte diferente, em vez da carregada no momento. No manipulador de eventos, você precisa determinar se deseja buscar novos dados ou retornar dados que já estão armazenados em cache localmente.

<IgbGrid AutoGenerate="false"
         Height="480px"
         Name="grid"
         Id="grid"
         Data="LocalData"
         @ref="grid"
         DataPreLoad="OnDataPreLoad">
    <IgbColumn Name="ID"
               Field="ProductID"
               Header="ID">
    </IgbColumn>

    <IgbColumn Name="ProductName"
               Field="ProductName"
               Header="Product Name">
    </IgbColumn>

    <IgbColumn Name="QuantityPerUnit"
               Field="QuantityPerUnit"
               Header="Quantity Per Unit">
    </IgbColumn>

    <IgbColumn Name="UnitPrice"
               Field="UnitPrice"
               Header="Unit Price">
    </IgbColumn>

    <IgbColumn Name="OrderDate"
               Field="OrderDate"
               Header="Order Date">
    </IgbColumn>

    <IgbColumn Name="Discontinued"
               Field="Discontinued"
               Header="Discontinued">
    </IgbColumn>

</IgbGrid>
@code {
        private IgbGrid grid;
        public async void OnDataPreLoad(IgbForOfStateEventArgs e)
        {
            int chunkSize = (int)e.Detail.ChunkSize;
            int startIndex = (int)e.Detail.StartIndex;
            int totalCount = (int)this.grid.TotalItemCount;

            bool isLastChunk = totalCount == startIndex + chunkSize;
            // when last chunk reached load another page of data
            if (isLastChunk)
            {
                if (this.TotalPageCount == this.Page)
                {
                    this.LocalData = this.CachedData.Skip(startIndex).Take(chunkSize).ToList();
                    return;
                }

                // add next page of remote data to cache
                this.grid.IsLoading = true;
                this.Page++;
                var remoteData = await GetDataRemote(this.Page, this.PageSize);
                this.CachedData.AddRange(remoteData);

                var data = this.CachedData.Skip(startIndex).Take(chunkSize);
                this.LocalData = data.ToList();
                this.grid.IsLoading = false;
                this.grid.TotalItemCount = Math.Min(this.Page * this.PageSize, this.TotalItems);
            }
            else
            {
                var data = this.CachedData.Skip(startIndex).Take(chunkSize).ToList();
                this.LocalData = data;
            }
        }
}

Infinite Scroll Demo

Remote Paging

O recurso de paginação pode operar com dados remotos. Para demonstrar isso, vamos primeiro declarar nosso serviço que será responsável pela busca de dados. Precisaremos da contagem de todos os itens de dados para calcular a contagem de páginas. Essa lógica será adicionada ao nosso serviço.

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