Operações de dados remotos do Web Components Grid

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

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

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

    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.

    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.

    export class RemotePagingService {
    public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
    constructor() {}

    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
        .then((result) => result.json())
        .catch((error) => console.error(error.message));
    }
    
    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
        let qS = "";
        if (baseUrl) {
                qS += `${baseUrl}`;
        }

        // Add pageIndex and size to the query string if they are defined
        if (pageIndex !== undefined) {
            qS += `?pageIndex=${pageIndex}`;
            if (pageSize !== undefined) {
                qS += `&size=${pageSize}`;
            }
        } else if (pageSize !== undefined) {
            qS += `?perPage=${pageSize}`;
        }

        return `${qS}`;
    }
}

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

    Primeiro, precisamos vincular aos eventos relevantes para que, quando mudarmos de página e a quantidade de registros mostrados por página, o serviço remoto busque a quantidade correta de dados

      constructor() {
      this.grid = document.getElementById('grid') as IgcGridComponent;
      this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
      
      this._bind = () => {
        window.addEventListener("load", () => {
          this.loadData(this.page,this.perPage);
        });

        this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
          this.perPage = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);

        this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
          this.page = args.detail;
          this.loadData(this.page, this.perPage);
        }) as EventListener);
      }

      this._bind();
  }

    Também precisamos definir o método para carregar dados e atualizar a interface do usuário de acordo:

      private loadData(pageIndex?: number, pageSize?: number): void {
    this.grid.isLoading = true;
    
    RemotePagingService.getDataWithPaging(pageIndex,pageSize)
    .then((response: CustomersWithPageResponseModel) => {
      this.totalRecordsCount = response.totalRecordsCount;
      this.pager.perPage = pageSize;
      this.pager.totalRecords = this.totalRecordsCount;
      this.page = response.pageNumber;
      this.data = response.items;
      this.grid.isLoading = false;
      this.updateUI(); // Update the UI after receiving data
    })
    .catch((error) => {
      console.error(error.message);
      // Stop loading even if error occurs. Prevents endless loading
      this.grid.isLoading = false;
      this.updateUI();
    })
  }

    private updateUI(): void {
    if (this.grid && this.data) { // Check if grid and data are available
        this.grid.data = this.data;
    }
  }

    Para mais referências, verifique a demonstração 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.