Blazor Pivot Grid 状態保持
Blazor Pivot Grid の Ignite UI for Blazor 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgbGridState が Blazor IgbPivotGrid に適用されると、GetStateAsStringAsync および ApplyStateFromStringAsync メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。
サポートされる機能
IgbGridState ディレクティブは、以下の機能の状態の保存および復元をサポートします。
SortingFilteringCellSelectionColumnSelectionExpansionPivotConfigurationIPivotConfigurationiインターフェイスによって定義されるピボット構成プロパティ。- ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「ピボット構成の復元」セクションを参照してください。
使用方法
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" });
}
ApplyStateFromStringAsync - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。
gridState.ApplyStateFromStringAsync(gridStateString, new string[0]);
gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0])
Options オブジェクトは、IgbGridStateOptions インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。GetStateAsStringAsync メソッドはこれらの機能の状態を戻り値に入れず、ApplyStateFromStringAsync メソッドはその状態を復元しません。
gridState.Options = new IgbGridStateOptions
{
CellSelection = false,
Sorting = false
};
これらのシンプルなシングル ポイント 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]);
}
}
}
ピボット構成の復元
IgbGridState は、デフォルトではピボット ディメンション関数、値フォーマッタなどを保持しません (制限を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。IgbPivotGrid は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (DimensionInit と ValueInit) を公開します。以下はその方法です。
DimensionInitおよびValueInitイベントのイベント ハンドラーを割り当てます。
<IgbPivotGrid
@ref="grid"
Width="95%"
Height="500px"
PivotConfiguration="PivotConfiguration"
ValueInitScript="OnValueInit">
</IgbPivotGrid>
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);
デモ
制限
GetStateメソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートされていないため、IgbGridStateディレクティブはピボット ディメンションMemberFunction、ピボット値Member、Formatter、カスタムAggregate関数、Styles、およびピボット構成戦略 (ColumnStrategyおよびRowStrategy) を無視します。