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

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

リモート仮想化

IgrGrid は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される ForOf ディレクティブで実装された動作を公開します。

この機能を使用するには、取得した引数に基づいて適切な要求を実行するために DataPreLoad 出力にサブスクライブし、サービスから送信される相対する情報とパブリック IgrGrid の TotalItemCount プロパティを設定する必要があります。

データを要求する際に StartIndex および ChunkSize プロパティを提供する IForOfState インターフェイスを使用できます。

リモートの仮想化デモ

一意の列値ストラテジ

Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。IgrGrid は、デフォルトでデータソースに基づいてこれらの値を生成します。リモート フィルタリングの場合、グリッドのデータにはサーバーからのすべてのデータが含まれていません。これらの一意の値を手動で提供し、オンデマンドで読み込むために、IgrGrid の UniqueColumnValuesStrategy 入力を利用できます。この入力は、実際には 3 つの引数を提供するメソッドです。

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

• IgrColumn - それぞれの列インスタンス。
• FilteringExpressionsTree - フィルタリング式ツリー。各列に基づいて削減されます。
• Done - サーバーから取得されたときに、新しく生成された列値で呼び出されるコールバック。

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

then set up the state:

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

and finally set up the method for loading the data:

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

For further reference please check the full sample bellow:

Grid Remote Paging Demo

開発者は、IgrColumn と FilteringExpressionsTree 引数によって提供される情報に基づいて、必要な一意の列値を手動で生成し、Done コールバックを呼び出すことができます。

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

まず、グリッドにデータを読み込む必要があります。タイミングの問題を回避するには、グリッドが描画された後に実行することをお勧めします。

その後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。

API リファレンス

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

まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。

また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。

最後に、階層グリッドの実際の階層レベルの背後にある動作を処理する必要があります。