IgbGrid の初期表示時に任意の行を選択する方法について解説します。

IgbGrid の設定

まず、IgbGrid コンポーネントを設定します。

  • @ref を使用して、このコンポーネントへの参照を作成します
  • PrimaryKey プロパティを使用して、各行を一意に識別するキーを設定します(この例では Id をキーとします)
<IgbGrid ....
        @ref = "grid"
        PrimaryKey="@nameof(Person.Id)">
</IgbGrid>

SelectRowsAsync メソッドの使用

初期表示時に特定の行を選択するためには、コンポーネントがレンダリングされた後に非同期的に実行する OnAfterRenderAsync メソッドを利用します。
firstRender パラメータが true の場合、つまり初回レンダリング時に、EnsureReady メソッドを使用して、グリッドが準備完了であることを確認し、SelectRowsAsync メソッドを使用して特定の行を選択します。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await this.grid?.EnsureReady()!;
        object[] array = new object[] { 3 };
        await this.grid?.SelectRowsAsync(array, true)!;
    }
}

実行結果

上記の設定を行うと初期表示時に指定した行(この例では Id が 3 の行)が選択状態になります。

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor