diff --git a/samples/grids/grid/remote-paging-grid/App.razor b/samples/grids/grid/remote-paging-grid/App.razor index f61055cf8..b2b73f183 100644 --- a/samples/grids/grid/remote-paging-grid/App.razor +++ b/samples/grids/grid/remote-paging-grid/App.razor @@ -1,86 +1,86 @@ @using IgniteUI.Blazor.Controls -@inject FlatGridData NwindDataService +@inject RemotePagingService RemoteService
- - - - - - - - - + + + + + + + +
+@if (!string.IsNullOrEmpty(errorMessage)) +{ +
+

@errorMessage

+
+} + @code { - private FlatGridData data = new FlatGridData(); - private int dataLength = 0; + private CustomerData[] data = Array.Empty(); 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(); + 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(); + 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); } } \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj b/samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj index 88e6030aa..836eb3527 100644 --- a/samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj +++ b/samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj @@ -12,17 +12,8 @@ -<<<<<<< HEAD -======= -<<<<<<<< HEAD:samples/grids/grid/remote-paging-data/BlazorClientApp.csproj - -======== - - ->>>>>>>> origin/master:samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj ->>>>>>> origin/master diff --git a/samples/grids/grid/remote-paging-grid/Program.cs b/samples/grids/grid/remote-paging-grid/Program.cs index c2871e5b9..270a5bef3 100644 --- a/samples/grids/grid/remote-paging-grid/Program.cs +++ b/samples/grids/grid/remote-paging-grid/Program.cs @@ -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 { @@ -17,9 +17,10 @@ public static async Task Main(string[] args) { var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("app"); - builder.Services.AddSingleton(); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); - // registering Ignite UI modules + builder.Services.AddScoped(); + builder.Services.AddIgniteUIBlazor( typeof(IgbInputModule), typeof(IgbPropertyEditorPanelModule), diff --git a/samples/grids/grid/remote-paging-grid/RemotePagingService.cs b/samples/grids/grid/remote-paging-grid/RemotePagingService.cs new file mode 100644 index 000000000..c83b70da1 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/RemotePagingService.cs @@ -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 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(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; } + } +} diff --git a/samples/grids/grid/remote-paging-grid/wwwroot/index.css b/samples/grids/grid/remote-paging-grid/wwwroot/index.css index fc603fd0c..4c5d521ef 100644 --- a/samples/grids/grid/remote-paging-grid/wwwroot/index.css +++ b/samples/grids/grid/remote-paging-grid/wwwroot/index.css @@ -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; +}