React Hierarchical Grid のリモート データ操作

デフォルトで、IgrHierarchicalGrid は独自のロジックを使用してデータ操作を実行します。

これらのタスクをリモートで実行し、IgrHierarchicalGrid によって公開される特定の入力とイベントを利用することで、結果として得られたデータを IgrHierarchicalGrid にフィードできます。

無限スクロール

エンドポイントからデータを分割して取得するシナリオの一般的な設計は、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールするたびに追加のデータが読み込まれ、表示されるデータが継続的に増えていくのが特徴です。次の段落では、使用可能な API を使用して IgrHierarchicalGrid で無限スクロールを簡単に実現する方法について説明します。

無限スクロールを実装するには、データをチャンク単位で取得する必要があります。既に取得したデータはローカルに保存し、チャンクの長さといくつのチャンクがあるかを判断する必要があります。また、グリッドで最後に表示されているデータ行のインデックスを追跡しておく必要があります。これにより、IgrForOfState.chunkSize と IgrForOfState.startIndex プロパティを使用して、ユーザーが上にスクロールして既に取得済みのデータを表示する必要があるか、下にスクロールしてエンドポイントからさらにデータを取得する必要があるかを判断できます。

最初に、データの最初のチャンクを取得します。IgrHierarchicalGrid.totalItemCount プロパティを設定することは、グリッドがスクロールバーのサイズを正しく設定できるようにするために重要です。

さらに、IgrIgrHierarchicalGrid.dataPreLoad 出力にサブスクライブする必要があります。これにより、グリッドが現在読み込まれているチャンクとは異なるチャンクを表示しようとする際に必要なデータを提供できます。イベント ハンドラーでは、新しいデータを取得するか、既にローカルにキャッシュされているデータを返すかを判断する必要があります。

無限スクロールのデモ

リモート ページング

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}`;
    }
}

サービスを宣言した後、IgrHierarchicalGrid の構築とデータのサブスクリプションを担当するコンポーネントを作成する必要があります。

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

次に、状態を設定します。

  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]);

次に、データを読み込むメソッドを設定します。

  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);
      })
  }

最後に、RowIsland の動作を設定します。

  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")
  };

詳細については、以下の完全なサンプルを確認してください。

グリッド リモート ページングのデモ

既知の問題と制限

グリッドに IgrHierarchicalGrid.primaryKey が設定されておらず、リモート データのシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロールによってリモート サーバーへの要求がトリガーされ、グリッドに表示するデータを取得する場合)、データ要求が完了すると、行は次の状態を失います。

• 行の選択
• 行の展開/折りたたみ
• 行の編集
• 行のピン留め

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)