fix(grid): update remote paging sample

browser/IgBlazorSamples.Client/Program.cs

@@ -23,7 +23,8 @@
 builder.Services.AddScoped(typeof(Infragistics.Samples.Core.SampleBrowser));
 builder.Services.AddScoped(typeof(Infragistics.Samples.Core.SampleTimer));
 builder.Services.AddSingleton<FlatGridData>();
-builder.Services.AddSingleton<HGridData>();
+builder.Services.AddScoped<HGridRemotePagingService>();
+builder.Services.AddScoped<RemotePagingService>();
 // registering Infragistics Blazor
 builder.Services.AddScoped(typeof(IIgniteUIBlazor), typeof(IgniteUIBlazor));
 

samples/grids/grid/remote-paging-grid/App.razor

@@ -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);
     }
 }

samples/grids/grid/remote-paging-grid/BlazorClientApp.csproj

@@ -12,17 +12,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-<<<<<<< HEAD
     <PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.38" />
     <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.38" />
-========
-    <PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.38" />
-    <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="10.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
     <PackageReference Include="System.Net.Http.Json" Version="10.0.1" />

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>("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),

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<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; }
+    }
+}

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;
+}

samples/grids/hierarchical-grid/remote-paging-grid/App.razor

@@ -0,0 +1,93 @@
+@using IgniteUI.Blazor.Controls
+@inject HGridRemotePagingService RemoteService
+
+<div class="container vertical ig-typography">
+    <div class="container vertical fill">
+        <IgbHierarchicalGrid @ref="grid1" AutoGenerate="false" Moving="true" PagingMode="GridPagingMode.Remote" PrimaryKey="ProductID" Height="600px">
+            <IgbPaginator @ref="pager" PageChange="OnPageChange" PerPageChange="OnPerPageChange" TotalRecords="totalRecordsCount" PerPage="15"></IgbPaginator>
+            <IgbColumn Name="ProductID" Field="ProductID" Header="Product ID" Hidden="true"></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="UnitsInStock" Field="UnitsInStock" Header="Units In Stock"></IgbColumn>
+            <IgbColumn Name="UnitsOnOrder" Field="UnitsOnOrder" Header="Units On Order"></IgbColumn>
+            <IgbColumn Name="Discontinued" Field="Discontinued" Header="Discontinued"></IgbColumn>
+            <IgbRowIsland ChildDataKey="Order_Details" AutoGenerate="false" PrimaryKey="OrderID">
+                <IgbColumn Name="OrderID" Field="OrderID" Header="Order ID"></IgbColumn>
+                <IgbColumn Name="UnitPrice" Field="UnitPrice" Header="Unit Price"></IgbColumn>
+                <IgbColumn Name="Quantity" Field="Quantity" Header="Quantity"></IgbColumn>
+                <IgbColumn Name="Discount" Field="Discount" Header="Discount"></IgbColumn>
+            </IgbRowIsland>
+        </IgbHierarchicalGrid>
+    </div>
+</div>
+
+@if (!string.IsNullOrEmpty(errorMessage))
+{
+    <div class="error-message">
+        <p>@errorMessage</p>
+    </div>
+}
+
+@code {
+    private HGridProductData[] data = Array.Empty<HGridProductData>();
+    private IgbHierarchicalGrid grid1;
+    private int totalRecordsCount;
+    private int page = 0;
+    private int perPage = 15;
+    private IgbPaginator pager;
+    private string errorMessage = string.Empty;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await LoadGridData(page, perPage);
+        }
+    }
+
+    private async Task LoadGridData(int pageIndex, int pageSize)
+    {
+        try
+        {
+            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();
+        }
+        catch (HttpRequestException)
+        {
+            errorMessage = "Network error. Please check your connection.";
+            data = Array.Empty<HGridProductData>();
+            grid1.Data = data;
+            grid1.IsLoading = false;
+            StateHasChanged();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Error loading data: {ex.Message}";
+            data = Array.Empty<HGridProductData>();
+            grid1.Data = data;
+            grid1.IsLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task OnPerPageChange(IgbNumberEventArgs e)
+    {
+        perPage = (int)e.Detail;
+        await LoadGridData(0, perPage);
+    }
+
+    private async Task OnPageChange(IgbNumberEventArgs e)
+    {
+        page = (int)e.Detail;
+        await LoadGridData(page, perPage);
+    }
+}