React Pivot Grid State Persistence

    피벗 그리드의 Ignite UI for React 상태 지속성을 통해 개발자 React 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. 가 IgrGridState React에 적용되면 개발자가 모든 시나리오에서 상태 지속성을 달성하는 데 사용할 수 있는 메서드가 getState​ ​applyStateFromString​ ​applyState​ ​getStateAsString 노출됩니다. IgrPivotGrid​

    Supported Features

    IgrGridState 다음 기능의 상태 저장 및 복원을 지원합니다.

    • Sorting
    • Filtering
    • CellSelection
    • ColumnSelection
    • Expansion
    • IgrPivotConfiguration
      • Pivot Configuration properties defined by the IPivotConfiguration interface.
      • 피벗 차원 및 값 기능은 애플리케이션 수준 코드를 사용하여 복원됩니다. 피벗 구성 복원 섹션을 참조하세요.

    Usage

    이 메서드는 getState 모든 상태 정보를 포함하는 개체의 그리드 상태를 IgrGridStateInfo 반환합니다. 저장하려면 추가 단계가 필요할 수 있습니다.

    직 getStateAsString 렬화된 JSON 문자열을 반환하므로 개발자는 이를 가져와 모든 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.

    개발자는 기능 이름이 있는 배열을 인수로 전달하여 특정 기능에 대한 상태만 가져오도록 선택할 수 있습니다. 빈 배열은 기본 상태 옵션을 사용하게 됩니다.

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

    // get an `IgrGridStateInfo` 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']);

    applyState- 이 메서드는 객체를 IgrGridStateInfo 인수로 받아들이고 객체 또는 지정된 피처에서 발견된 각 피처의 상태를 두 번째 인수로 복원합니다.

    applyStateFromString- 이 메서드는 직렬화된 JSON 문자열을 인수로 받아들이고 JSON 문자열 또는 지정된 기능에서 발견된 각 기능의 상태를 두 번째 인수로 복원합니다.

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

    객체는 options 인터페이스를 구현합니다 IgrGridStateOptions., 즉 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. getState / getStateAsString methods는 이러한 기능의 상태를 반환된 값에 넣지 않으며 applyState / applyStateFromString methods는 해당 기능의 상태를 복원하지 않습니다.

    <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, []);
    }
}

    Restoring Pivot Configuration

    IgrGridState 기본적으로 pivot dimension 함수, value formatter 등을 유지하지 않습니다(제한 사항 참조). 이러한 복원은 응용 프로그램 수준에서 코드를 사용하여 수행할 수 있습니다. IgrPivotGrid configuration: DimensionInit and에 있는 사용자 정의 함수를 다시 설정하는 데 사용할 수 있는 두 개의 이벤트를 노출합니다 ValueInit. 이 작업을 수행하는 방법을 보여 드리겠습니다.

    • 및 ValueInit 이벤트에 대한 이벤트 처리기를 DimensionInit 할당합니다.

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

    Demo

    Limitations

    • getState 메서드는 JSON.stringify() 메서드를 사용하여 원본 개체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않으므로 지시문은 IgrGridState 피벗 차원 MemberFunction, 피벗 값 member, Formatter 사용자 정의 aggregate 함수 및 styles 피벗 구성 전략: columnStrategy and rowStrategy를 무시합니다.