Operações de dados remotos do React Grid

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

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

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

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

         <IgrGrid
          ref={grid}
          data={data}
          pagingMode={GridPagingMode.Remote}
          primaryKey="customerId"
          height="600px"
          isLoading={isLoading}
        >
        <IgrPaginator 
          perPage={perPage}
          ref={paginator}
          pageChange={onPageNumberChange}
          perPageChange={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ã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.