Blazor Pivot Grid 状態保持

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

    サポートされる機能

    IgbGridState ディレクティブは、以下の機能の状態の保存および復元をサポートします。

    • Sorting
    • Filtering
    • CellSelection
    • ColumnSelection
    • Expansion
    • PivotConfiguration
      • IPivotConfiguration iインターフェイスによって定義されるピボット構成プロパティ。
      • ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「ピボット構成の復元」セクションを参照してください。

    使用方法

    GetStateAsStringAsync は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの 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 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。

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

    • DimensionInit および ValueInit イベントのイベント ハンドラーを割り当てます。
        <IgbPivotGrid
        @ref="grid"
        Width="95%"
        Height="500px"
        PivotConfiguration="PivotConfiguration"
        ValueInitScript="OnValueInit">
    </IgbPivotGrid>
razor

    DimensionInit および ValueInit イベントは、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 メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートされていないため、IgbGridState ディレクティブはピボット ディメンション MemberFunction、ピボット値 Member、Formatter、カスタム Aggregate 関数、Styles、およびピボット構成戦略 (ColumnStrategy および RowStrategy) を無視します。