Skip to content

fix(grid): update remote paging sample #1190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tishko0 wants to merge 1 commit into
base: vnext
Choose a base branch
from
Open

fix(grid): update remote paging sample #1190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 50 additions & 50 deletions samples/grids/grid/remote-paging-grid/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,86 @@
@using IgniteUI.Blazor.Controls
@inject FlatGridData NwindDataService
@inject RemotePagingService RemoteService

<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid @ref="grid1" AutoGenerate="false" Moving="true" PagingMode="GridPagingMode.Remote">
<IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount"></IgbPaginator>
<IgbColumn Name="OrderDate" Field="OrderDate" Header="Order Date"></IgbColumn>
<IgbColumn Name="ProductName" Field="ProductName" Header="Product Name"></IgbColumn>
<IgbColumn Name="QuantityPerUnit" Field="QuantityPerUnit" Header="Quantity Per Unit"></IgbColumn>
<IgbColumn Name="UnitPrice" Field="UnitPrice" Header="Unit Price"></IgbColumn>
<IgbColumn Name="SupplierID" Field="SupplierID" Header="Supplier ID"></IgbColumn>
<IgbColumn Name="UnitsInStock" Field="UnitsInStock" Header="Units In Stock"></IgbColumn>
<IgbColumn Name="UnitsOnOrder" Field="UnitsOnOrder" Header="Units On Order"></IgbColumn>
<IgbGrid @ref="grid1" AutoGenerate="false" Moving="true" PagingMode="GridPagingMode.Remote" PrimaryKey="CustomerId" Height="600px">
<IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount" PerPage="15"></IgbPaginator>
<IgbColumn Name="CustomerId" Field="CustomerId" Header="Customer ID" Hidden="true"></IgbColumn>
<IgbColumn Name="CompanyName" Field="CompanyName" Header="Company Name"></IgbColumn>
<IgbColumn Name="ContactName" Field="ContactName" Header="Contact Name"></IgbColumn>
<IgbColumn Name="ContactTitle" Field="ContactTitle" Header="Contact Title"></IgbColumn>
<IgbColumn Name="Country" Field="Address.Country" Header="Country"></IgbColumn>
<IgbColumn Name="Phone" Field="Address.Phone" Header="Phone"></IgbColumn>
</IgbGrid>
</div>
</div>

@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="error-message">
<p>@errorMessage</p>
</div>
}

@code {
private FlatGridData data = new FlatGridData();
private int dataLength = 0;
private CustomerData[] data = Array.Empty<CustomerData>();
private IgbGrid grid1;
private int totalRecordsCount;
private double page = 0;
private double _perPage = 15;
private int page = 0;
private int perPage = 15;
private IgbPaginator pager;
private bool isLoading = true;

private string errorMessage = string.Empty;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await Paginate(0, PerPage);
totalRecordsCount = await NwindDataService.GetDataLength();
StateHasChanged();
await LoadGridData(page, perPage);
}
}

private async Task Paginate(double page, double perPage)
private async Task LoadGridData(int pageIndex, int pageSize)
{
this.page = page;
double skip = this.page * PerPage;
double top = PerPage;

try
{
data.items = await NwindDataService.GetData(Convert.ToInt32(skip), Convert.ToInt32(perPage));
isLoading = false;
UpdateUI();
}
catch (Exception ex)
{
Console.Error.WriteLine($"Error fetching data: {ex.Message}");
grid1.IsLoading = true;
errorMessage = string.Empty;

var response = await RemoteService.GetDataWithPagingAsync(pageIndex, pageSize);
data = response.Items;
grid1.Data = data;
totalRecordsCount = response.TotalRecordsCount;

grid1.IsLoading = false;
StateHasChanged();
}
}

private void UpdateUI()
{
if (grid1 != null && data.items != null)
catch (HttpRequestException)
{
grid1.Data = data.items;
errorMessage = "Network error. Please check your connection.";
data = Array.Empty<CustomerData>();
grid1.Data = data;
grid1.IsLoading = false;
StateHasChanged();
}
}

private double PerPage
{
get => _perPage;
set
catch (Exception ex)
{
_perPage = value;
new Task(async () => await Paginate(page, PerPage)).Start();
errorMessage = $"Error loading data: {ex.Message}";
data = Array.Empty<CustomerData>();
grid1.Data = data;
grid1.IsLoading = false;
StateHasChanged();
}
}

private async void OnPerPageChange(IgbNumberEventArgs e)
private async Task OnPerPageChange(IgbNumberEventArgs e)
{
PerPage = e.Detail;
await Paginate(0, e.Detail);
perPage = (int)e.Detail;
await LoadGridData(0, perPage);
}

private async void OnPageChange(IgbNumberEventArgs e)
private async Task OnPageChange(IgbNumberEventArgs e)
{
await Paginate(e.Detail, PerPage);
page = (int)e.Detail;
await LoadGridData(page, perPage);
}
}
9 changes: 0 additions & 9 deletions samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,8 @@
</PropertyGroup>

<ItemGroup>
<<<<<<< HEAD
<PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.32" />
<PackageReference Include="Microsoft.AspNet.WebApi.Client" Version="6.0.0" />
=======
<<<<<<<< HEAD:samples/grids/grid/remote-paging-data/BlazorClientApp.csproj
<PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.32" />
========
<PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.32" />
<PackageReference Include="Microsoft.AspNet.WebApi.Client" Version="6.0.0" />
>>>>>>>> origin/master:samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj
>>>>>>> origin/master
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" />
<PackageReference Include="System.Net.Http.Json" Version="9.0.0" />
Expand Down
7 changes: 4 additions & 3 deletions samples/grids/grid/remote-paging-grid/Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
Expand All @@ -17,9 +17,10 @@ public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddSingleton<FlatGridData>();

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddScoped<RemotePagingService>();

builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
Expand Down
63 changes: 63 additions & 0 deletions samples/grids/grid/remote-paging-grid/RemotePagingService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
using System.Net.Http;
using System.Threading.Tasks;
using System.Text.Json;

namespace Infragistics.Samples
{
public class RemotePagingService
{
private readonly HttpClient _httpClient;
private const string CustomersUrl = "https://data-northwind.indigo.design/Customers/GetCustomersWithPage";

public RemotePagingService(HttpClient httpClient)
{
_httpClient = httpClient;
}

public async Task<CustomersWithPageResponse> GetDataWithPagingAsync(int pageIndex, int pageSize)
{
var url = BuildUrl(CustomersUrl, pageIndex, pageSize);
var response = await _httpClient.GetAsync(url);
response.EnsureSuccessStatusCode();

var content = await response.Content.ReadAsStringAsync();
return JsonSerializer.Deserialize<CustomersWithPageResponse>(content, new JsonSerializerOptions
{
PropertyNameCaseInsensitive = true
});
}

private string BuildUrl(string baseUrl, int pageIndex, int pageSize)
{
return $"{baseUrl}?pageIndex={pageIndex}&size={pageSize}";
}
}

public class CustomersWithPageResponse
{
public CustomerData[] Items { get; set; }
public int TotalRecordsCount { get; set; }
public int PageSize { get; set; }
public int PageNumber { get; set; }
public int TotalPages { get; set; }
}

public class CustomerData
{
public string CustomerId { get; set; }
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public CustomerAddress Address { get; set; }
}

public class CustomerAddress
{
public string Street { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
}
}
31 changes: 31 additions & 0 deletions samples/grids/grid/remote-paging-grid/wwwroot/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,34 @@
CSS styles are loaded from the shared CSS file located at:
https://dl.infragistics.com/x/css//samples/
*/

.loading-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.9);
padding: 2rem 3rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
font-size: 1.2rem;
color: #666;
}

.loading-indicator p {
margin: 0;
}

.error-message {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 4px;
padding: 1rem;
margin-top: 1rem;
}

.error-message p {
margin: 0;
}