quickgrid using in-memory data

HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor

@@ -30,6 +30,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="qcinmemory">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> QG InMemory
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="quickgriddata">
                 <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> QuickGrid Data

HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor

@@ -0,0 +1,24 @@
+@page "/qcinmemory"
+@inject InMemoryData Data
+
+@rendermode RenderMode.InteractiveServer
+
+<div class="grid">
+    <QuickGrid Items="@itemsQueryable">
+        <PropertyColumn Property="@(c => c.Name)" Sortable="true" />
+        <PropertyColumn Property="@(c => c.Gold)" Sortable="true" Align="Align.Right" />
+        <PropertyColumn Property="@(c => c.Silver)" Sortable="true" Align="Align.Right" />
+        <PropertyColumn Property="@(c => c.Bronze)" Sortable="true" Align="Align.Right" />
+        <PropertyColumn Property="@(c => c.Total)" Sortable="true" Align="Align.Right" />
+    </QuickGrid>
+</div>
+
+@code {
+    IQueryable<MedalTally>? itemsQueryable;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var items = await Data.GetDataAsync();
+        itemsQueryable = items.AsQueryable();
+    }
+}

HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css

@@ -0,0 +1,17 @@
+/* Fix height and enable scrolling */
+.grid {
+	height: 16.5rem;
+	overflow-y: auto;
+}
+
+/* Sticky header while scrolling */
+::deep thead {
+	position: sticky;
+	top: 0;
+	background-color: #eee;
+}
+
+/* Subtle stripe effect */
+::deep tr:nth-child(even) {
+	background: rgba(255,255,255,0.4);
+}

HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor

@@ -14,4 +14,5 @@
 @using HelloBlazorServer.Services
 @using HelloBlazorServer.Models
 @using Radzen
-@using Radzen.Blazor
+@using Radzen.Blazor
+@using HelloBlazorServer.Data;

HelloBlazorServer/HelloBlazorServer/Data/InMemoryData.cs

@@ -0,0 +1,110 @@
+using HelloBlazorServer.Models;
+using System.Linq.Dynamic.Core;
+
+namespace HelloBlazorServer.Data
+{
+    public class InMemoryData
+    {
+        public async Task<List<MedalTally>> GetDataAsync()
+        {
+            MedalTally[] medalTallies =
+            [
+                new MedalTally { Name = "Argentina", Gold = 0, Silver = 1, Bronze = 2, Total = 3 },
+                new MedalTally { Name = "Armenia", Gold = 0, Silver = 2, Bronze = 2, Total = 4 },
+                new MedalTally { Name = "Australia", Gold = 17, Silver = 7, Bronze = 22, Total = 46 },
+                new MedalTally { Name = "Austria", Gold = 1, Silver = 1, Bronze = 5, Total = 7 },
+                new MedalTally { Name = "Azerbaijan", Gold = 0, Silver = 3, Bronze = 4, Total = 7 },
+                new MedalTally { Name = "Bahamas", Gold = 2, Silver = 0, Bronze = 0, Total = 2 },
+                new MedalTally { Name = "Bahrain", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Belarus", Gold = 1, Silver = 3, Bronze = 3, Total = 7 },
+                new MedalTally { Name = "Belgium", Gold = 3, Silver = 1, Bronze = 3, Total = 7 },
+                new MedalTally { Name = "Bermuda", Gold = 1, Silver = 0, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Botswana", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Brazil", Gold = 7, Silver = 6, Bronze = 8, Total = 21 },
+                new MedalTally { Name = "Bulgaria", Gold = 3, Silver = 1, Bronze = 2, Total = 6 },
+                new MedalTally { Name = "Burkina Faso", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Canada", Gold = 7, Silver = 6, Bronze = 11, Total = 24 },
+                new MedalTally { Name = "Chinese Taipei", Gold = 2, Silver = 4, Bronze = 6, Total = 12 },
+                new MedalTally { Name = "Colombia", Gold = 0, Silver = 4, Bronze = 1, Total = 5 },
+                new MedalTally { Name = "Côte d'Ivoire", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Croatia", Gold = 3, Silver = 3, Bronze = 2, Total = 8 },
+                new MedalTally { Name = "Cuba", Gold = 7, Silver = 3, Bronze = 5, Total = 15 },
+                new MedalTally { Name = "Czech Republic", Gold = 4, Silver = 4, Bronze = 3, Total = 11 },
+                new MedalTally { Name = "Denmark", Gold = 3, Silver = 4, Bronze = 4, Total = 11 },
+                new MedalTally { Name = "Dominican Republic", Gold = 0, Silver = 3, Bronze = 2, Total = 5 },
+                new MedalTally { Name = "Ecuador", Gold = 2, Silver = 1, Bronze = 0, Total = 3 },
+                new MedalTally { Name = "Egypt", Gold = 1, Silver = 1, Bronze = 4, Total = 6 },
+                new MedalTally { Name = "Estonia", Gold = 1, Silver = 0, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Ethiopia", Gold = 1, Silver = 1, Bronze = 2, Total = 4 },
+                new MedalTally { Name = "Fiji", Gold = 1, Silver = 0, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Finland", Gold = 0, Silver = 0, Bronze = 2, Total = 2 },
+                new MedalTally { Name = "France", Gold = 10, Silver = 12, Bronze = 11, Total = 33 },
+                new MedalTally { Name = "Georgia", Gold = 2, Silver = 5, Bronze = 1, Total = 8 },
+                new MedalTally { Name = "Germany", Gold = 10, Silver = 11, Bronze = 16, Total = 37 },
+                new MedalTally { Name = "Ghana", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Great Britain", Gold = 22, Silver = 21, Bronze = 22, Total = 65 },
+                new MedalTally { Name = "Greece", Gold = 2, Silver = 1, Bronze = 1, Total = 4 },
+                new MedalTally { Name = "Grenada", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Hong Kong, China", Gold = 1, Silver = 2, Bronze = 3, Total = 6 },
+                new MedalTally { Name = "Hungary", Gold = 6, Silver = 7, Bronze = 7, Total = 20 },
+                new MedalTally { Name = "India", Gold = 1, Silver = 2, Bronze = 4, Total = 7 },
+                new MedalTally { Name = "Indonesia", Gold = 1, Silver = 1, Bronze = 3, Total = 5 },
+                new MedalTally { Name = "Ireland", Gold = 2, Silver = 0, Bronze = 2, Total = 4 },
+                new MedalTally { Name = "Islamic Republic of Iran", Gold = 3, Silver = 2, Bronze = 2, Total = 7 },
+                new MedalTally { Name = "Israel", Gold = 2, Silver = 0, Bronze = 2, Total = 4 },
+                new MedalTally { Name = "Italy", Gold = 10, Silver = 10, Bronze = 20, Total = 40 },
+                new MedalTally { Name = "Jamaica", Gold = 4, Silver = 1, Bronze = 4, Total = 9 },
+                new MedalTally { Name = "Japan", Gold = 27, Silver = 14, Bronze = 17, Total = 58 },
+                new MedalTally { Name = "Jordan", Gold = 0, Silver = 1, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Kazakhstan", Gold = 0, Silver = 0, Bronze = 8, Total = 8 },
+                new MedalTally { Name = "Kenya", Gold = 4, Silver = 4, Bronze = 2, Total = 10 },
+                new MedalTally { Name = "Kosovo", Gold = 2, Silver = 0, Bronze = 0, Total = 2 },
+                new MedalTally { Name = "Kuwait", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Kyrgyzstan", Gold = 0, Silver = 2, Bronze = 1, Total = 3 },
+                new MedalTally { Name = "Latvia", Gold = 1, Silver = 0, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Lithuania", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Malaysia", Gold = 0, Silver = 1, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Mexico", Gold = 0, Silver = 0, Bronze = 4, Total = 4 },
+                new MedalTally { Name = "Mongolia", Gold = 0, Silver = 1, Bronze = 3, Total = 4 },
+                new MedalTally { Name = "Morocco", Gold = 1, Silver = 0, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Namibia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Netherlands", Gold = 10, Silver = 12, Bronze = 14, Total = 36 },
+                new MedalTally { Name = "New Zealand", Gold = 7, Silver = 6, Bronze = 7, Total = 20 },
+                new MedalTally { Name = "Nigeria", Gold = 0, Silver = 1, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "North Macedonia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Norway", Gold = 4, Silver = 2, Bronze = 2, Total = 8 },
+                new MedalTally { Name = "People's Republic of China", Gold = 38, Silver = 32, Bronze = 18, Total = 88 },
+                new MedalTally { Name = "Philippines", Gold = 1, Silver = 2, Bronze = 1, Total = 4 },
+                new MedalTally { Name = "Poland", Gold = 4, Silver = 5, Bronze = 5, Total = 14 },
+                new MedalTally { Name = "Portugal", Gold = 1, Silver = 1, Bronze = 2, Total = 4 },
+                new MedalTally { Name = "Puerto Rico", Gold = 1, Silver = 0, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Qatar", Gold = 2, Silver = 0, Bronze = 1, Total = 3 },
+                new MedalTally { Name = "Republic of Korea", Gold = 6, Silver = 4, Bronze = 10, Total = 20 },
+                new MedalTally { Name = "Republic of Moldova", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "ROC", Gold = 20, Silver = 28, Bronze = 23, Total = 71 },
+                new MedalTally { Name = "Romania", Gold = 1, Silver = 3, Bronze = 0, Total = 4 },
+                new MedalTally { Name = "San Marino", Gold = 0, Silver = 1, Bronze = 2, Total = 3 },
+                new MedalTally { Name = "Saudi Arabia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Serbia", Gold = 3, Silver = 1, Bronze = 5, Total = 9 },
+                new MedalTally { Name = "Slovakia", Gold = 1, Silver = 2, Bronze = 1, Total = 4 },
+                new MedalTally { Name = "Slovenia", Gold = 3, Silver = 1, Bronze = 1, Total = 5 },
+                new MedalTally { Name = "South Africa", Gold = 1, Silver = 2, Bronze = 0, Total = 3 },
+                new MedalTally { Name = "Spain", Gold = 3, Silver = 8, Bronze = 6, Total = 17 },
+                new MedalTally { Name = "Sweden", Gold = 3, Silver = 6, Bronze = 0, Total = 9 },
+                new MedalTally { Name = "Switzerland", Gold = 3, Silver = 4, Bronze = 6, Total = 13 },
+                new MedalTally { Name = "Syrian Arab Republic", Gold = 0, Silver = 0, Bronze = 1, Total = 1 },
+                new MedalTally { Name = "Thailand", Gold = 1, Silver = 0, Bronze = 1, Total = 2 },
+                new MedalTally { Name = "Tunisia", Gold = 1, Silver = 1, Bronze = 0, Total = 2 },
+                new MedalTally { Name = "Turkey", Gold = 2, Silver = 2, Bronze = 9, Total = 13 },
+                new MedalTally { Name = "Turkmenistan", Gold = 0, Silver = 1, Bronze = 0, Total = 1 },
+                new MedalTally { Name = "Uganda", Gold = 2, Silver = 1, Bronze = 1, Total = 4 },
+                new MedalTally { Name = "Ukraine", Gold = 1, Silver = 6, Bronze = 12, Total = 19 },
+                new MedalTally { Name = "United States of America", Gold = 39, Silver = 41, Bronze = 33, Total = 113 },
+                new MedalTally { Name = "Uzbekistan", Gold = 3, Silver = 0, Bronze = 2, Total = 5 },
+                new MedalTally { Name = "Venezuela", Gold = 1, Silver = 3, Bronze = 0, Total = 4 }
+            ];
+
+            return await medalTallies.ToDynamicListAsync<MedalTally>();
+        }
+    }
+}

HelloBlazorServer/HelloBlazorServer/Models/MedalTally.cs

@@ -0,0 +1,11 @@
+namespace HelloBlazorServer.Models
+{
+    public class MedalTally
+    {
+        public string Name { get; set; }
+        public int Gold { get; set; }
+        public int Silver { get; set; }
+        public int Bronze { get; set; }
+        public int Total { get; set; }
+    }
+}

HelloBlazorServer/HelloBlazorServer/Program.cs

@@ -48,6 +48,8 @@ namespace HelloBlazorServer
             builder.Services.AddDbContext<BlazorServerDbContext>();
             builder.Services.AddScoped<IDatabase<GangnamguPopulation>, GangnamguPopulationService>();
 
+            builder.Services.AddScoped<InMemoryData>();
+
             var app = builder.Build();
 
             // Configure the HTTP request pipeline.