React Tree Grid 状態保持

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

サポートされる機能

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

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

使用方法

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

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

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

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

// 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 メソッドはその状態を復元しません。

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

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 columns templates, column formatters, etc. by default (see limitations). Restoring any of these can be achieved with code on application level. Let’s show how to do this for templated columns:

IgrGridState はデフォルトで列テンプレート、列フォーマッタなどを保持しません (制限を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。

<IgrGrid columnInit={onColumnInit}>
    <IgrGridState></IgrGridState>
    <IgrColumn field="IsActive" header="IsActive" bodyTemplate={activeTemplate}></IgrColumn>
</IgrGrid>

function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) {
    return (<IgrCheckbox checked={ctx.dataContext.cell.value}></IgrCheckbox>);
}

2 - In the ColumnInit event handler, assign the template to the column BodyTemplate property:

function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) {
    const column: IgrColumn = e.detail;
    if (column.field === 'IsActive') {
        column.bodyTemplate = this.activeTemplate;
    }
}

デモ

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

• IgrGridState.getStateAsString method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the IgrGridState component will ignore the columns Formatter, Filters, Summaries, IgrTreeGrid.sortStrategy, IgrColumn.cellClasses, CellStyles, HeaderTemplate and BodyTemplate properties.

API リファレンス

その他のリソース

• ページング
• フィルタリング
• ソート
• 選択