Blazor Pivot Grid State Persistence

    Blazor Pivot Grid의 Ignite UI for Blazor 상태 지속성을 통해 개발자는 그리드 상태를 쉽게 저장하고 복원할 수 있습니다. Blazor IgbGridState​ ​IgbPivotGrid에 적용되면 개발자가 모든 시나리오에서 상태 유지를 달성하는 데 사용할 수 있는 및 ApplyStateFromStringAsync 메서드가 노출 GetStateAsStringAsync 됩니다.

    지원되는 기능

    IgbGridState 지시문은 다음 기능의 상태 저장 및 복원을 지원합니다.

    용법

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

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

    <IgbPivotGrid>
        <IgbGridState @ref="gridState"></IgbGridState>
    </IgbPivotGrid>
    
    @code {
        // get all features` state in a serialized JSON string
        string stateString = gridState.GetStateAsStringAsync(new string[0]);
    
        // get the sorting and filtering expressions
        string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" });
    }
    razor

    ApplyStateFromStringAsync- 이 메서드는 직렬화된 JSON 문자열을 인수로 허용하고 JSON 문자열 또는 지정된 기능에 있는 각 기능의 상태를 두 번째 인수로 복원합니다.

    gridState.ApplyStateFromStringAsync(gridStateString, new string[0]);
    gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0])
    razor

    객체는 Options 인터페이스를 구현 IgbGridStateOptions 합니다, 즉 특정 기능의 이름인 모든 키에 대해 이 기능 상태가 추적되는지 여부를 나타내는 부울 값이 있습니다. GetStateAsStringAsync 메서드는 이러한 기능의 상태를 반환된 값에 넣지 않으며 ApplyStateFromStringAsync 메서드는 해당 기능의 상태를 복원하지 않습니다.

    gridState.Options = new IgbGridStateOptions
        {
            CellSelection = false,
            Sorting = false
        };
    razor

    사용하기 쉬운 단일 지점 API를 사용하면 몇 줄의 코드로 전체 상태 유지 기능을 얻을 수 있습니다. 아래에서 코드를 복사하여 붙여 넣 으십시오 - 사용자가 현재 페이지를 떠날 때마다 브라우저 LocalStorage 개체에 그리드 상태를 저장합니다. 사용자가 기본 페이지로 돌아갈 때마다 그리드 상태가 복원됩니다. 더 이상 원하는 데이터를 얻기 위해 매번 복잡한 고급 필터링 및 정렬 표현식을 구성할 필요가 없습니다 - 한 번만 수행하고 아래 코드가 사용자를 위해 나머지 작업을 수행하도록 합니다.

    @using IgniteUI.Blazor.Controls
    @using Newtonsoft.Json
    @implements IDisposable
    
    @inject IJSRuntime JS
    @inject NavigationManager Navigation
    
    <IgbPivotGrid Rendered="OnGridRendered">
        <IgbGridState @ref="gridState"></IgbGridState>
        <IgbColumn Field="ContactName" Header="Name" MinWidth="200px" ></IgbColumn>
        <IgbColumn Field="ContactTitle" Header="Title" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
        <IgbColumn Field="CompanyName" Header="Company" MinWidth="200px" Sortable="true" Filterable="true" Groupable="true"></IgbColumn>
    </IgbPivotGrid>
    
    @code {
        protected override void OnAfterRender(bool firstRender)
        {
            Navigation.LocationChanged += OnLocationChanged;
        }
    
        void OnLocationChanged(object sender, LocationChangedEventArgs e)
        {
            SaveGridState();
        }
    
        void IDisposable.Dispose()
        {
            // Unsubscribe from the event when our component is disposed
            Navigation.LocationChanged -= OnLocationChanged;
        }
    
        void OnGridRendered()
        {
            RestoreGridState();
        }
    
        async void SaveGridState() {
            string state = gridState.GetStateAsStringAsync(new string[0]);
            await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-state", state);
        }
    
        async void RestoreGridState() {
            string state = await JS.InvokeAsync<string>("window.localStorage.getItem", "grid-state");
            if (state) {
                gridState.ApplyStateFromStringAsync(state, new string[0]);
            }
        }
    }
    razor

    피벗 구성 복원

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

    • ValueInit 이벤트에 대한 이벤트 처리기를 DimensionInit 할당합니다.
        <IgbPivotGrid
            @ref="grid"
            Width="95%"
            Height="500px"
            PivotConfiguration="PivotConfiguration"
            ValueInitScript="OnValueInit">
        </IgbPivotGrid>
    razor

    DimensionInitValueInit 이벤트는 속성에 정의된 각 값과 차원에 대해 내보내집니다 PivotConfiguration.

    • 이벤트 처리기에서 ValueInit 모든 사용자 지정 집계자, 포맷터 및 스타일을 설정합니다.
    // In Javascript
    const totalSale = (members, data) => {
        return data.reduce((accumulator, value) => accumulator + value.ProductUnitPrice * value.NumberOfUnits, 0);
    };
    
    const totalMin = (members, data) => {
        let min = 0;
        if (data.length === 1) {
            min = data[0].ProductUnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
            min = mappedData.reduce((a, b) => Math.min(a, b));
        }
        return min;
    };
    
    const totalMax = (members, data) => {
        let max = 0;
        if (data.length === 1) {
            max = data[0].ProductUnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.ProductUnitPrice * x.NumberOfUnits);
            max = mappedData.reduce((a, b) => Math.max(a, b));
        }
        return max;
    };
    
    igRegisterScript("OnValueInit", (args) => {
        const value = args.detail;
        if (value.member === "AmountOfSale") {
          value.aggregate.aggregator = totalSale;
          value.aggregateList?.forEach((aggr) => {
            switch (aggr.key) {
              case "SUM":
                aggr.aggregator = totalSale;
                break;
              case "MIN":
                aggr.aggregator = totalMin;
                break;
              case "MAX":
                aggr.aggregator = totalMax;
                break;
            }
          });
        }
    }, false);
    razor

    데모

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    제한 사항

    • GetState method는 JSON.stringify() 메서드를 사용하여 원본 객체를 JSON 문자열로 변환합니다. JSON.stringify()는 함수를 지원하지 않기 때문에 지시문은 IgbGridState 피벗 차원 MemberFunction, 피벗 값 Member, Formatter 사용자 정의 Aggregate 함수 Styles 및 피벗 구성 전략을 ColumnStrategy​ ​RowStrategy 무시합니다.