Blazor Grid 状態保持
Blazor Grid の Ignite UI for Blazor 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。IgbGridState
が Blazor IgbGrid
に適用されると、GetStateAsString
および ApplyStateFromString
メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。
サポートされる機能
IgbGridState
ディレクティブは、以下の機能の状態の保存および復元をサポートします。
- Sorting
- Filtering
- Advanced Filtering
- Paging
- CellSelection
- RowSelection
- ColumnSelection
- RowPinning
- Expansion
- GroupBy
- Columns
- 複数列ヘッダー
- 列の順序
IColumnState
インターフェイスによって定義される列プロパティ。
使用方法
GetStateAsString
は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。
開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。
<IgbGrid>
<IgbGridState @ref="gridState"></IgbGridState>
</IgbGrid>
@code {
// get all features` state in a serialized JSON string
string stateString = gridState.GetStateAsString(new string[0]);
// get the sorting and filtering expressions
string sortingFilteringStates = gridState.GetStateAsString(new string[] { "sorting", "filtering" });
}
ApplyStateFromString
- このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。
gridState.ApplyStateFromString(gridStateString, new string[0]);
gridState.ApplyStateFromString(sortingFilteringStates, new string[0])
Options
オブジェクトは、IgbGridStateOptions
インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。GetStateAsString
メソッドはこれらの機能の状態を戻り値に入れず、ApplyStateFromString
メソッドはその状態を復元しません。
gridState.Options = new IgbGridStateOptions
{
CellSelection = false,
Sorting = false
};
これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。下からコードをコピーして貼り付けます - ユーザーが現在のページを離れるたびに、ブラウザーの SessionStorage
オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。
@using IgniteUI.Blazor.Controls
@using Newtonsoft.Json
@implements IDisposable
@inject IJSRuntime JS
@inject NavigationManager Navigation
<IgbGrid 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>
</IgbGrid>
@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.getStateAsString(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.ApplyStateFromString(state, new string[0]);
}
}
}
制限
GetStateAsString
メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、IgbGridState
コンポーネントは、列のFormatter
、Filters
、Summaries
、SortStrategy
、CellClasses
、CellStyles
、HeaderTemplate
およびBodyTemplate
プロパティを無視します。