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

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

    これらのタスクをリモートで実行し、IgrGrid で公開される特定の入力とイベントを使用して IgrGrid に結果のデータを供給できます。

    無限スクロール

    エンドポイントからデータを分割して取得するシナリオの一般的なデザインは、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールすることによってトリガーされたロードデータが連続的に増加します。次の段落では、使用可能な API を使用して IgrGrid で無限スクロールを簡単に実現する方法について説明します。

    無限スクロールを実装するには、データを分割してフェッチする必要があります。すでにフェッチされたデータはローカルに保存し、チャンクの長さおよび数を決定する必要があります。また、グリッドで最後に表示されるデータ行インデックスを追跡する必要があります。このように、StartIndexChunkSize プロパティを使用して、ユーザーが上にスクロールして既にフェッチしたデータを表示するか、下にスクロールしてエンドポイントからさらにデータをフェッチする必要があるかを決定できます。

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

    さらに、DataPreLoad 出力にサブスクライブする必要があります。これにより、グリッドが現在ロードされているものではなく、異なるチャンクを表示しようとするときに必要なデータを提供できます。イベント ハンドラーで、ローカルに既にキャッシュされている新しいデータをフェッチするか、データを返すかを決定する必要があります。

    無限スクロールのデモ

    既知の問題と制限

    • グリッドに PrimaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
    • 行の選択
    • 行の展開/縮小
    • 行の編集
    • 行のピン固定

    API リファレンス

    その他のリソース

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