IgbDataGrid – ページ初期表示時に、指定行にスクロールする

IgbDataGrid は非推奨のコントロールです。代わりに IgbGrid をご利用ください。IgbGrid での実装方法についてご不明な点がありましたら弊社技術サポートまでお問い合わせください。

IgbDataGrid を配置したページ上で、そのページ (Razor コンポーネント) の初期表示時に、予め IgbDataGrid を指定行にスクロールしておくには、以下のプログラムコードで実現できます。

@page "/"
...
<IgbDataGrid @ref="_DataGridRef" ...>...</IgbDataGrid>
...
@code {
    private IgbDataGrid _DataGridRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // IgbDataGrid コンポーネントが操作可能になるまで待つ
            await _DataGridRef.EnsureReady();

            // 例として、4,321 行目へスクロールさせる
            _DataGridRef.ScrollToRowByIndex(4321);
        }
    }
...

要点は次のとおりです。

・IgbDataGrid をスクロールさせるタイミングは、ページ (Razor コンポーネント) の OnAfterRenderAsync(bool firstRender)メソッドが呼び出されたとき、かつ、その引数 ( firstRender ) が true のとき

・IgbDataGrid をスクロールさせる前に、IgbDataGrid が操作可能になるまで、IgbDataGrid の EnsureRedy() メソッドの呼び出しを await で待機

・IgbDataGrid をプログラムコードから指定行にスクロールさせるには、IgbDataGrid の ScrollToRowByIndex(行インデックス) を呼び出す

補足

IgbDataGrid を初期スクロールさせるタイミングとして OnAfterRenderAsync() を使用する背景など、Blazor アプリケーションにおける Razor コンポーネントの “ライフサイクル” について詳しくは、下記公式ドキュメントサイトも併せてご参照ください。

https://docs.microsoft.com/ja-jp/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0

注意点

なお、IgbDataGrid の EnsureReady() メソッドによる待機を行わなくても、IgbDataGrid にバインドしているデータの行数やプログラム実行環境の処理速度によっては正常に動作してしまうこともあります。
しかし、タイミングや状況によっては、下記例外が発生することとなります。

System.InvalidOperationException: cannot invoke method until main component is ready.

このように、EnsureReady() によるタイミング調整を行わないと、潜在的な不具合となりますのでご注意ください。

サンプル