Premium

React Pivot Grid 状態保持

React Pivot Grid の Ignite UI for React 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgrGridState が React IgrPivotGrid に適用されると、GetState、GetStateAsString 、ApplyState および ApplyStateFromString メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。

サポートされる機能

IgrGridState は、以下の機能の状態の保存および復元をサポートします。

Sorting
Filtering
IgrPivotGrid.cellSelection
IgrPivotGrid.columnSelection
Expansion
IgrPivotConfiguration
- IgrPivotConfiguration インターフェースで定義されるピボット構成プロパティ。
- ピボットディメンションおよび値関数は、アプリケーションレベルのコードで復元されます。詳細はピボット構成の復元セクションを参照してください。

使用方法

GetState メソッドは、すべての状態情報を含むグリッドの状態を IgrGridStateInfo オブジェクトで返します。保存するには追加の手順が必要になる場合があります。

GetStateAsString は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。

開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。

<IgrPivotGrid>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

// get an `GridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string
const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

IgrGridState.applyState - このメソッドは IgrGridStateInfo オブジェクトを引数として受け取り、オブジェクト内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

IgrGridState.applyStateFromString - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

gridStateRef.current.applyState(gridState, []);
gridStateRef.current.applyStateFromString(gridStateString, []);
gridStateRef.current.applyState(sortingFilteringStates, [])

Options オブジェクトは IgrGridStateOptions インターフェースを実装します。特定の機能の名前であるキーごとに、その機能の状態を追跡するかどうかを示すブール値があります。IgrGridState.getState/IgrGridState.getStateAsString メソッドはこれらの機能の状態を戻り値に含めず、IgrGridState.applyState/IgrGridState.applyStateFromString メソッドはその状態を復元しません。

<IgrGridState options={{ cellSelection: false, sorting: false }}></IgrGridState>

シンプルな単一の API を使用することで、わずか数行のコードで完全な状態の保持機能を実現できます。以下のコードをコピーして貼り付けてください。これにより、ユーザーが現在のページを離れるたびに、ブラウザーの LocalStorage オブジェクトにグリッドの状態が保存されます。ユーザーがメインページに戻ると、グリッドの状態が復元されます。目的のデータを取得するために複雑な高度なフィルタリングやソートの式を毎回設定する必要はもうありません。一度設定するだけで、以下のコードがユーザーのために残りの処理を行います。

<IgrPivotGrid onRendered={restoreGridState}>
    <IgrGridState ref={gridStateRef}></IgrGridState>
</IgrPivotGrid>

useEffect(() => {
    restoreGridState();
    window.addEventListener('beforeunload', saveGridState);
    return () => {
      window.removeEventListener('beforeunload', saveGridState);
    }
}, []);

// Using methods that work with IgrGridStateInfo object.
const saveGridState = () => {
    const state = gridStateRef.current.getState([]);
    window.localStorage.setItem('grid-state', JSON.stringify(state));
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyState(JSON.parse(state), []);
    }
}

//Or using string alternative methods.
const saveGridState = () => {
    const state = gridStateRef.current.getStateAsString([]);
    window.localStorage.setItem('grid-state', state);
}

const restoreGridState = () => {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
        gridStateRef.current.applyStateFromString(state, []);
    }
}

ピボット構成の復元

IgrGridState は、デフォルトではピボットディメンション関数、値フォーマッタなどを保持しません (制限を参照)。これらの復元は、アプリケーションレベルのコードで実現できます。IgrPivotGrid は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (DimensionInit と ValueInit) を公開します。以下はその方法です。

DimensionInit および ValueInit イベントのイベントハンドラーを割り当てます。

      <IgrPivotGrid
        ref={gridRef}
        data={gridData}
        pivotConfiguration={pivotConfiguration}
        valueInit={onValueInit}
      >
        <IgrGridState ref={gridStateRef}></IgrGridState>
      </IgrPivotGrid>

DimensionInit および ValueInit イベントは、PivotConfiguration プロパティで定義された値とディメンションごとに発行されます。

ValueInit イベントハンドラーで、カスタムのアグリゲーター、フォーマッタ、およびスタイルをすべて設定します:

  const onValueInit = (event: IgrPivotValueEventArgs) => {
    const value: IgrPivotValueDetail = event.detail;
    if (value.member === "AmountofSale") {
      value.aggregate.aggregator = totalSale;
      value.aggregateList?.forEach((aggr: any) => {
        switch (aggr.key) {
          case "SUM":
            aggr.aggregator = totalSale;
            break;
          case "MIN":
            aggr.aggregator = totalMin;
            break;
          case "MAX":
            aggr.aggregator = totalMax;
            break;
        }
      });
    } else if (value.member === "Value") {
      value.styles.upFontValue = (rowData: any, columnKey: any): boolean =>
        parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150;
      value.styles.downFontValue = (rowData: any, columnKey: any): boolean =>
        parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150;
    }
  }

デモ

制限

IgrGridState.getState メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、IgrGridState ディレクティブは、ピボットディメンションの MemberFunction、ピボット値の Member、Formatter、カスタム Aggregate 関数、Styles、およびピボット構成ストラテジ（ColumnStrategy と RowStrategy）を無視します。