From ae36db7a4b0547c9144d3f040b1eedc1be8049ed Mon Sep 17 00:00:00 2001 From: Maya Kirova Date: Tue, 11 Jul 2023 17:00:13 +0300 Subject: [PATCH 1/2] Enable remote operations topic for blazor. --- docfx/en/components/toc.json | 2 +- docfx/jp/components/toc.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index e6505d898..beb781442 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -296,7 +296,7 @@ "status": "" }, { - "exclude": ["Angular", "React", "Blazor"], + "exclude": ["Angular", "React"], "name": "Remote Data Operations", "href": "grids/grid/remote-data-operations.md", "status": "" diff --git a/docfx/jp/components/toc.json b/docfx/jp/components/toc.json index 890188f4d..d48b535cd 100644 --- a/docfx/jp/components/toc.json +++ b/docfx/jp/components/toc.json @@ -293,7 +293,7 @@ "status": "" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular", "React"], "name": "リモート データ操作", "href": "grids/grid/remote-data-operations.md", "status": "" From b5eb1a20f20f675d8a988f1b4df38396d523cb7b Mon Sep 17 00:00:00 2001 From: Maya Kirova Date: Tue, 11 Jul 2023 17:12:47 +0300 Subject: [PATCH 2/2] Add blazor section and snippets. --- .../grids/_shared/remote-data-operations.md | 118 ++++++++++++++++-- 1 file changed, 105 insertions(+), 13 deletions(-) diff --git a/doc/en/components/grids/_shared/remote-data-operations.md b/doc/en/components/grids/_shared/remote-data-operations.md index 1d7979791..8d1524ed0 100644 --- a/doc/en/components/grids/_shared/remote-data-operations.md +++ b/doc/en/components/grids/_shared/remote-data-operations.md @@ -87,7 +87,7 @@ When requesting data, you need to utilize the `IForOfState` interface, which pro - + ## Infinite Scroll @@ -95,12 +95,13 @@ When requesting data, you need to utilize the `IForOfState` interface, which pro To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the `StartIndex` and `ChunkSize` properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point. - + + - -The first thing to do is use the `ngAfterViewInit` lifecycle hook to fetch the first chunk of the data. Setting the `TotalItemCount` property is important, as it allows the grid to size its scrollbar correctly. +The first thing to do is fetch the first chunk of the data. Setting the `TotalItemCount` property is important, as it allows the grid to size its scrollbar correctly. + ```typescript public ngAfterViewInit() { this._remoteService.loadDataForPage(this.page, this.pageSize, (request) => { @@ -115,12 +116,36 @@ public ngAfterViewInit() { } ``` + + ```razor -BLAZOR CODE SNIPPET HERE +@code { + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + var grid = this.grid; + grid.IsLoading = true; + double dataViewSize = 480.0 / 50.0; + this.PageSize = Convert.ToInt32(Math.Floor(dataViewSize * 1.5)); + var data = await GetDataRemote(1, this.PageSize); + this.CachedData = data; + this.LocalData = this.CachedData; + grid.TotalItemCount = (this.PageSize * this.Page) + 1; + double pageCount = Math.Ceiling((double)this.TotalItems / (double)this.PageSize); + this.TotalPageCount = (int)pageCount; + grid.IsLoading = false; + StateHasChanged(); + } + + } +} ``` Additionally, you have to subscribe to the `DataPreLoad` output, so that you can provide the data needed by the grid when it tries to display a different chunk, rather than the currently loaded one. In the event handler, you have to determine whether to fetch new data or return data, that's already cached locally. + + ```typescript public handlePreLoad() { const isLastChunk = this.grid.totalItemCount === @@ -145,18 +170,85 @@ public handlePreLoad() { } } ``` + ```razor -BLAZOR CODE SNIPPET HERE + + + + + + + + + + + + + + + + + + + + +@code { + private IgbGrid grid; + public async void OnDataPreLoad(IgbForOfStateEventArgs e) + { + int chunkSize = (int)e.Detail.ChunkSize; + int startIndex = (int)e.Detail.StartIndex; + int totalCount = (int)this.grid.TotalItemCount; + + bool isLastChunk = totalCount == startIndex + chunkSize; + // when last chunk reached load another page of data + if (isLastChunk) + { + if (this.TotalPageCount == this.Page) + { + this.LocalData = this.CachedData.Skip(startIndex).Take(chunkSize).ToList(); + return; + } + + // add next page of remote data to cache + this.grid.IsLoading = true; + this.Page++; + var remoteData = await GetDataRemote(this.Page, this.PageSize); + this.CachedData.AddRange(remoteData); + + var data = this.CachedData.Skip(startIndex).Take(chunkSize); + this.LocalData = data.ToList(); + this.grid.IsLoading = false; + this.grid.TotalItemCount = Math.Min(this.Page * this.PageSize, this.TotalItems); + } + else + { + var data = this.CachedData.Skip(startIndex).Take(chunkSize).ToList(); + this.LocalData = data; + } + } +} ``` - - - - - - - ### Infinite Scroll Demo `sample="/{ComponentSample}/infinite-scroll", height="550", alt="{Platform} {ComponentTitle} Remote Data Operations Infinite Scroll Example"`