React Pivot Grid 状態保持

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

サポートされる機能

IgrGridState supports saving and restoring the state of the following features:

• Sorting
• Filtering
• IgrPivotGrid.cellSelection
• IgrPivotGrid.columnSelection
• Expansion
• IgrPivotConfiguration
  • Pivot Configuration properties defined by the IgrPivotConfiguration interface.
  • Pivot Dimension and Value functions are restored using application level code, see Restoring Pivot Configuration section.

使用方法

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 - The method accepts a IgrGridStateInfo object as argument and will restore the state of each feature found in the object or specified features as second argument.

IgrGridState.applyStateFromString - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument.

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

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

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

Options オブジェクトは、IGridStateOptions インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。GetState メソッドはこれらの機能の状態を戻り値に入れず、SetState メソッドはその状態を復元しません。

<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 will not persist pivot dimension functions, value formatters, etc. by default (see limitations). Restoring any of these can be achieved with code on application level. The IgrPivotGrid exposes two events which can be used to set back any custom functions you have in the configuration: DimensionInit and ValueInit. Let’s show how to do this:

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

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

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

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

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

デモ

ピボット ストラテジの復元

StateParsed は、文字列引数で SetState を使用している場合にのみ発行します。