Operações de dados remotos do React Grid

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

    Você pode realizar essas tarefas remotamente e alimentar os dados resultantes para oIgrGrid aproveitando certos inputs e eventos, que são expostos peloIgrGrid.

    Infinite Scroll

    Um design popular para cenários que exigem buscar dados por blocos de um ponto final é o chamado scroll infinito. Para grades de dados, ele é caracterizado pelo aumento contínuo dos dados carregados acionados pelo usuário final que rola até o fundo. Os próximos parágrafos explicam como você pode usar a API disponível para alcançar facilmente rolagemIgrGrid infinita.

    Para implementar o scroll infinito, você precisa buscar os dados em blocos. Os dados que já foram buscados devem ser armazenados localmente e você precisa determinar o comprimento de um bloco e quantos blocos existem. Você também precisa acompanhar o último índice visível de linhas de dados na grade. Dessa forma, usando asStartIndex propriedades e,ChunkSize você pode determinar se o usuário rola para cima e você precisa mostrar dados já buscados ou descer e buscar mais dados do ponto final.

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

    Além disso, você precisa assinar aDataPreLoad saída, para poder fornecer os dados necessários pela grade quando ela tentar exibir um pedaço diferente, em vez do que está carregado atualmente. No gerenciador de eventos, você precisa determinar se busca novos dados ou retorna dados que já estão cacheados 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.

    const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;

export class RemoteService {

    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
        return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
        .then((result) => result.json());
    }

    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 pelaIgrGrid construção e assinatura de dados.

         <IgrGrid
          ref={grid}
          data={data}
          pagingMode="remote"
          primaryKey="customerId"
          height="600px"
          isLoading={isLoading}
        >
        <IgrPaginator
          perPage={perPage}
          ref={paginator}
          onPageChange={onPageNumberChange}
          onPerPageChange={onPageSizeChange}>
        </IgrPaginator>
          <IgrColumn field="customerId" hidden={true}></IgrColumn>
          <IgrColumn field="companyName" header="Company Name"></IgrColumn>
          <IgrColumn field="contactName" header="Contact Name"></IgrColumn>
          <IgrColumn field="contactTitle" header="Contact Title"></IgrColumn>
          <IgrColumn field="address.country" header="Country"></IgrColumn>
          <IgrColumn field="address.phone" header="Phone"></IgrColumn>
        </IgrGrid>

    Em seguida, configure o estado:

      const grid = useRef<IgrGrid>(null);
  const paginator = useRef<IgrPaginator>(null);
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);
  const [perPage, setPerPage] = useState(15);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadGridData(page, perPage);
  }, [page, perPage]);

    e, finalmente, configure o método para carregar os dados:

      function loadGridData(pageIndex?: number, pageSize?: number) {
    // Set loading state
    setIsLoading(true);

    // Fetch data
    RemoteService.getDataWithPaging(pageIndex, pageSize)
      .then((response: CustomersWithPageResponseModel) => {
        setData(response.items);
        // Stop loading when data is retrieved
        setIsLoading(false);
        paginator.current.totalRecords = response.totalRecordsCount;
      })
      .catch((error) => {
        console.error(error.message);
        setData([]);
        // Stop loading even if error occurs. Prevents endless loading
        setIsLoading(false);
      })
  }

    Para mais referência, por favor, verifique a amostra completa abaixo:

    Grid Remote Paging Demo

    e, finalmente, configurar o comportamento para as RowIslands:

    Known Issues and Limitations

    • Quando a grade nãoprimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisiçõ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.