React Hierarchical Grid Remote Data Operations

By default, the IgrHierarchicalGrid uses its own logic for performing data operations.

You can perform these tasks remotely and feed the resulting data to the IgrHierarchicalGrid by taking advantage of certain inputs and events, which are exposed by the IgrHierarchicalGrid.

Remote Paging

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

export class RemoteService {

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

    public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
        return fetch(`${BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
        .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}`;
    }
}

After declaring the service, we need to create a component, which will be responsible for the IgrHierarchicalGrid construction and data subscription.

  <IgrHierarchicalGrid
          ref={hierarchicalGrid}
          data={data}
          pagingMode="remote"
          primaryKey="customerId"
          height="600px"
        >
          <IgrPaginator
            perPage={perPage}
            ref={paginator}
            onPageChange={onPageNumberChange}
            onPerPageChange={onPageSizeChange}
          ></IgrPaginator>
          ...
          <IgrRowIsland
            childDataKey="Orders"
            primaryKey="orderId"
            onGridCreated={onCustomersGridCreatedHandler}>
            ...

            <IgrRowIsland
              childDataKey="Details"
              primaryKey="productId"
              onGridCreated={onOrdersGridCreatedHandler}>
              ...
            </IgrRowIsland>
          </IgrRowIsland>
        </IgrHierarchicalGrid>

then set up the state:

  const hierarchicalGrid = useRef<IgrHierarchicalGrid>(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]);

next set up the method for loading the data:

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

    // Fetch data
    RemoteService.getCustomersDataWithPaging(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);
      })
  }

and finally set up the behaviour for the RowIslands:

  function gridCreated(event: IgrGridCreatedEventArgs, parentKey: string) {
    const context = event.detail;
    context.grid.isLoading = true;

    const parentId: string = context.parentID;
    const childDataKey: string = context.owner.childDataKey;

    RemoteService.getHierarchyDataById(parentKey, parentId, childDataKey)
      .then((data: any) => {
        context.grid.data = data;
        context.grid.isLoading = false;
        context.grid.markForCheck();
      })
      .catch((error) => {
        console.error(error.message);
        context.grid.data = [];
        context.grid.isLoading = false;
        context.grid.markForCheck();
      });
  }

  const onCustomersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => {
    gridCreated(e, "Customers")
  };

  const onOrdersGridCreatedHandler = (e: IgrGridCreatedEventArgs) => {
    gridCreated(e, "Orders")
  };

For further reference please check the full sample bellow:

Grid Remote Paging Demo

Known Issues and Limitations

When the grid has no PrimaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

Row Selection
Row Expand/collapse
Row Editing
Row Pinning

API References

Additional Resources

Our community is active and always welcoming to new ideas.