Blazor Tree Grid 状態保持

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

サポートされる機能

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

• ソート
• フィルタリング
• 高度なフィルタリング
• ページング
• セルの選択
• 行の選択
• 列の選択
• 行のピン固定
• 展開
• グループ化
• 列
  • 複数列ヘッダー
  • 列の順序
  • IgbColumnState インターフェイスによって定義される列プロパティ

使用方法

GetStateAsStringAsync は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。

開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。

<IgbTreeGrid>
    <IgbGridState @ref="gridState"></IgbGridState>
</IgbTreeGrid>

@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

<IgbTreeGrid 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>
</IgbTreeGrid>

@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 はデフォルトで列テンプレート、列フォーマッタなどを保持しません (制限 を参照)。これらの復元は、アプリケーションレベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。

1 - テンプレート参照変数（以下の例では #activeTemplate）を定義し、ColumnInit イベントのイベント ハンドラーを割り当てます:

<IgbTreeGrid>
    <IgbGridState @ref="gridState"></IgbGridState>
    <IgbColumn Field="IsActive" Header="IsActive" BodyTemplate="ActiveTemplate">
    </IgbColumn>
</IgbTreeGrid>

@code {
    public static RenderFragment<IgbCellTemplateContext> ActiveTemplate = (context) =>
    {
        bool value = Convert.ToBoolean(context.Cell.Value);
        return @<IgbCheckbox Checked="@value"></IgbCheckbox>;
    };
}

2 - ColumnInit イベント ハンドラーで、テンプレートを列の BodyTemplate プロパティに割り当てます:

@code {
    public void OnColumnInit(IgbColumnComponentEventArgs args)
    {
        IgbColumn column = args.Detail;
        if (column.Field == "IsActive")
        {
            column.BodyTemplate = ActiveTemplate;
        }
    }
}

デモ

制限

• IgbGridState.GetStateAsString メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、IgbGridState コンポーネントは、列の Formatter、Filters、Summaries、IgbTreeGrid.SortStrategy、IgbColumn.CellClasses、CellStyles、HeaderTemplate および BodyTemplate プロパティを無視します。

API リファレンス

その他のリソース

• ページング
• フィルタリング
• ソート
• 選択