Blazor Hierarchical Grid のリモート データ操作
デフォルトで、IgbHierarchicalGrid は独自のロジックを使用してデータ操作を実行します。
これらのタスクをリモートで実行し、IgbHierarchicalGrid で公開される特定の入力とイベントを使用して IgbHierarchicalGrid に結果のデータを供給できます。
リモート ページング
Blazor Server はすでにリモート インスタンスであるため、他のプラットフォームのデモとは異なり、データがすでにリモートであるため、データ用に別のリモート インスタンスを設定する必要はありません。リモート ページングを行うには、データ クラスにいくつかのメソッドを設定する必要があります。
public Task<List<NwindDataItem>> GetData(int index, int perPage)
{
var itemsToReturn = items.Skip(index).Take(perPage).ToList();
return Task.FromResult(itemsToReturn);
}
public Task<int> GetDataLength()
{
return Task.FromResult(items.Count);
}
razorサービスを宣言した後にコンポーネントを作成する必要があり、IgbHierarchicalGrid コンストラクションとデータ サブスクリプションを処理します。
まず、グリッドにデータを読み込む必要があります。タイミングの問題を回避するには、グリッドが描画された後に実行することをお勧めします。
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Paginate(0, PerPage);
totalRecordsCount = await NwindDataService.GetDataLength();
StateHasChanged();
}
}
razorその後は、ページング イベントをカスタム メソッドにバインドするだけで、リモート ページングが設定されます。
<IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount"></IgbPaginator>
....
@code {
private async void OnPerPageChange(IgbNumberEventArgs e)
{
PerPage = e.Detail;
await Paginate(0, e.Detail);
}
private async void OnPageChange(IgbNumberEventArgs e)
{
await Paginate(e.Detail, PerPage);
}
...
private async Task Paginate(double page, double perPage)
{
this.page = page;
double skip = this.page * PerPage;
double top = PerPage;
try
{
data = await NwindDataService.GetData(Convert.ToInt32(skip), Convert.ToInt32(perPage));
isLoading = false;
UpdateUI();
}
catch (Exception ex)
{
Console.Error.WriteLine($"Error fetching data: {ex.Message}");
}
}
}
razor詳細については、以下の完全なデモをご覧ください。
グリッド リモート ページングのデモ
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
既知の問題と制限
- グリッドに
PrimaryKeyが設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- 行の選択
- 行の展開/縮小
- 行の編集
- 行のピン固定
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。