Org Chart/HR Portal sample: tree grid with scoped Fluent theme and templated cells

.gitignore

@@ -53,3 +53,9 @@ npm-debug.log
 # OS files
 .DS_Store
 Thumbs.db
+
+
+# Others
+*.claude
+*.mcp.json
+e2e

BlazorGridExamples/BlazorGridExamples.csproj

@@ -8,7 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="IgniteUI.Blazor" Version="25.2.104" />
+    <PackageReference Include="IgniteUI.Blazor" Version="26.1.51" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.8" PrivateAssets="all" />
   </ItemGroup>

BlazorGridExamples/Layout/NavMenu.razor

@@ -1,19 +1,26 @@
 @inject NavigationManager NavigationManager
+@inject IJSRuntime JS
+@implements IDisposable
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.JSInterop
 
 <IgbThemeProvider Theme="Theme.Material">
     <div class="tabs-info-wrapper-element material-theme-scope">
-        <div class="tab-container ig-typography ig-scrollbar">
-            @foreach (var tab in Tabs)
-            {
-                <div type="button" class="tab-item-container" @onclick="() => NavigateToSample(tab.Key)">
-                    <div class="tab-item @(IsActive(tab.Key) ? "tab-item--selected" : "")">
-                        <div class="tab-header">
-                            @tab.Title.ToUpper()
+        @if (!isFullscreen)
+        {
+            <div class="tab-container ig-typography ig-scrollbar">
+                @foreach (var tab in Tabs)
+                {
+                    <div type="button" class="tab-item-container" @onclick="() => NavigateToSample(tab.Key)">
+                        <div class="tab-item @(IsActive(tab.Key) ? "tab-item--selected" : "")">
+                            <div class="tab-header">
+                                @tab.Title.ToUpper()
+                            </div>
                         </div>
                     </div>
-                </div>
-            }
-        </div>
+                }
+            </div>
+        }
 
         @if (CurrentTab != null)
         {
@@ -26,22 +33,28 @@
 
                     <div class="sample-actions">
                         <div class="theme-info">Theme: @CurrentTab.Theme</div>
-                        <div class="theme-info">Mode: Light</div>
+                        <div class="theme-info">Mode: @CurrentTab.Mode</div>
                         <div class="action-buttons">
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="() => DownloadSample(CurrentTab.Key)">
-                                <span class="download-icon">⬇</span>
-                                Download
-                            </IgbButton>
-
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="() => ViewMore(CurrentTab.Key)">
-                                <span>👁</span>
-                                View More
-                            </IgbButton>
-
-                            <IgbButton Variant="ButtonVariant.Outlined" class="custom-button" @onclick="ToggleFullscreen">
-                                <span>@(isFullscreen ? "⊗" : "⛶")</span>
-                                <span>@(isFullscreen ? "Exit Fullscreen" : "Fullscreen")</span>
-                            </IgbButton>
+                            <span class="action-btn" @onclick="() => DownloadSample(CurrentTab.Key)">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon @ref="iconRef" IconName="file_download" Collection="material" class="btn-icon"></IgbIcon>
+                                    Download
+                                </IgbButton>
+                            </span>
+
+                            <span class="action-btn" @onclick="() => ViewMore(CurrentTab.Key)">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon IconName="view_more" Collection="material" class="btn-icon"></IgbIcon>
+                                    View More
+                                </IgbButton>
+                            </span>
+
+                            <span class="action-btn" @onclick="ToggleFullscreen">
+                                <IgbButton Variant="ButtonVariant.Outlined" class="custom-button">
+                                    <IgbIcon IconName="@(isFullscreen ? "exit_full_screen" : "full_screen")" Collection="material" class="btn-icon"></IgbIcon>
+                                    <span>@(isFullscreen ? "Exit Fullscreen" : "Fullscreen")</span>
+                                </IgbButton>
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -54,83 +67,145 @@
 
     private bool isFullscreen = false;
 
+    private const string DownloadSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.41 11.21V3.616c0-.43.167-.84.466-1.144A1.578 1.578 0 0 1 12 2c.422 0 .826.17 1.125.473.298.304.466.715.466 1.144v7.586l2.195-2.282a1.49 1.49 0 0 1 1.05-.455 1.47 1.47 0 0 1 1.06.434l.022.021c.284.294.443.689.443 1.1 0 .412-.16.807-.443 1.1l-4.81 4.972a1.496 1.496 0 0 1-1.069.454h-.084a1.47 1.47 0 0 1-1.066-.454L6.076 11.12a1.586 1.586 0 0 1-.44-1.098c0-.41.158-.805.44-1.098a1.49 1.49 0 0 1 1.05-.457 1.47 1.47 0 0 1 1.06.432l.025.025 2.199 2.284Z"/><path fill="currentColor" d="M20.41 14.729a1.59 1.59 0 0 0-1.592 1.591v1.613a.886.886 0 0 1-.884.884H6.07a.892.892 0 0 1-.89-.884V16.32a1.591 1.591 0 0 0-3.181 0v1.618A4.087 4.087 0 0 0 6.066 22h11.868A4.07 4.07 0 0 0 22 17.931V16.32a1.59 1.59 0 0 0-1.59-1.591Z"/></svg>""";
+    private const string ViewMoreSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M17 7H7"/><path d="M17 7V17"/></svg>""";
+    private const string FullScreenSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4h-6M20 4v6M4 20h6M4 20v-6"/></svg>""";
+    private const string ExitFullScreenSvg = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"><line x1="5.5" y1="2" x2="5.5" y2="6.5"/><line x1="5.5" y1="6.5" x2="1" y2="6.5"/><line x1="14.5" y1="2" x2="14.5" y2="6.5"/><line x1="14.5" y1="6.5" x2="19" y2="6.5"/><line x1="5.5" y1="17" x2="5.5" y2="12.5"/><line x1="5.5" y1="12.5" x2="1" y2="12.5"/><line x1="14.5" y1="17" x2="14.5" y2="12.5"/><line x1="14.5" y1="12.5" x2="19" y2="12.5"/></svg>""";
+    private DotNetObjectReference<NavMenu>? _selfRef;
+    private IgbIcon? iconRef;
+
 
     private class TabInfo
     {
         public string Key { get; set; } = "";
         public string Title { get; set; } = "";
         public string Description { get; set; } = "";
         public string Theme { get; set; } = "Bootstrap";
+        public string Mode { get; set; } = "Light";
     }
 
     private List<TabInfo> Tabs = new()
     {
         new TabInfo
         {
-            Key = "erp-inventory",
+            Key = "inventory",
             Title = "ERP/Inventory",
-            Description = "Sample app for ERP/Inventory handling large data volumes using Hierarchical Grid."
+            Description = "Tracking and managing quantity, location and details of products in stock.",
+            Theme = "Material",
+            Mode = "Light"
         },
         new TabInfo
         {
             Key = "hr-portal",
             Title = "Org Chart/HR Portal",
-            Description = "Example featuring a Tree Grid to manage and display employee information.",
-            Theme = "Fluent"
+            Description = "Displaying company's hierarchical structure and showing employees data.",
+            Theme = "Fluent",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "finance-grid",
+            Key = "finance",
             Title = "Financial Portfolio",
-            Description = "An example app showing assets, profit, and loss analyses with live data updates and high-performance Data Grid."
+            Description = "Asset tracking, profit and loss analysis, featuring interactive dynamic charts.",
+            Theme = "Bootstrap",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "sales-grid",
+            Key = "sales",
             Title = "Sales Dashboard",
-            Description = "Sales app example with summaries by region, product, and time periods using Pivot Grid."
+            Description = "For trend analysis, KPIs and viewing sales summaries by region, product, etc.",
+            Theme = "Indigo",
+            Mode = "Light"
         },
         new TabInfo
         {
-            Key = "fleet-management",
+            Key = "fleet",
             Title = "Fleet Management",
-            Description = "Sample app with a Master-Detail Grid for managing vehicle acquisition, operations, and maintenance."
+            Description = "A master-detail grid for managing vehicle acquisition, operations, and maintenance.",
+            Theme = "Material",
+            Mode = "Dark"
         }
     };
 
     private TabInfo? CurrentTab => Tabs.FirstOrDefault(t => IsActive(t.Key));
 
     private bool IsActive(string key)
     {
-        var currentPath = new Uri(NavigationManager.Uri).LocalPath;
-        return currentPath.Contains(key, StringComparison.OrdinalIgnoreCase);
+        var path = new Uri(NavigationManager.Uri).LocalPath;
+        var current = path.Contains("/home/", StringComparison.OrdinalIgnoreCase)
+            ? path.Split("/home/")[^1].TrimEnd('/')
+            : "inventory";
+        return string.Equals(current, key, StringComparison.OrdinalIgnoreCase);
     }
 
     private void NavigateToSample(string key)
     {
-        NavigationManager.NavigateTo($"/{key}");
+        NavigationManager.NavigateTo($"/home/{key}");
+    }
+
+    protected override void OnInitialized()
+    {
+        // The NavMenu lives in the layout and isn't re-rendered automatically on route
+        // changes, so the active tab / current-tab-info would go stale. Re-render on navigation.
+        NavigationManager.LocationChanged += HandleLocationChanged;
+    }
+
+    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        InvokeAsync(StateHasChanged);
     }
 
     private async Task DownloadSample(string key)
     {
-        // TODO: Implement download functionality
-        // This would zip the sample project and download it
-        await Task.CompletedTask;
+        await JS.InvokeVoidAsync("shellInterop.download",
+            "https://github.com/IgniteUI/blazor-grid-examples/archive/refs/heads/master.zip");
+    }
+
+    private async Task ViewMore(string key)
+    {
+        await JS.InvokeVoidAsync("shellInterop.openTab",
+            "https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/overview");
+    }
+
+    private async Task ToggleFullscreen()
+    {
+        // Browser fullscreen is toggled here; isFullscreen is then synced by the
+        // fullscreenchange listener so pressing Esc also restores the tab strip.
+        await JS.InvokeVoidAsync("shellInterop.toggleFullscreen");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _selfRef = DotNetObjectReference.Create(this);
+            await JS.InvokeVoidAsync("shellInterop.registerFullscreenListener", _selfRef);
+
+            if (iconRef is not null)
+            {
+                await iconRef.EnsureReady();
+                await iconRef.RegisterIconFromTextAsync("file_download", DownloadSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("view_more", ViewMoreSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("full_screen", FullScreenSvg, "material");
+                await iconRef.RegisterIconFromTextAsync("exit_full_screen", ExitFullScreenSvg, "material");
+            }
+        }
     }
 
-    private void ViewMore(string key)
+    [JSInvokable]
+    public void OnFullscreenChange(bool isFs)
     {
-        // Navigate to documentation or more info
-        var tab = Tabs.FirstOrDefault(t => t.Key == key);
-        if (tab != null)
+        if (isFullscreen != isFs)
         {
-            NavigationManager.NavigateTo($"https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/grid/overview", true);
+            isFullscreen = isFs;
+            InvokeAsync(StateHasChanged);
         }
     }
 
-    private void ToggleFullscreen()
+    public void Dispose()
     {
-        isFullscreen = !isFullscreen;
-        // TODO: Implement actual fullscreen toggle using JS Interop
+        NavigationManager.LocationChanged -= HandleLocationChanged;
+        _selfRef?.Dispose();
     }
 }

BlazorGridExamples/Pages/ERPInventory.razor

@@ -1,3 +1,5 @@
-@page "/erp-inventory"
+@page "/"
+@page "/home"
+@page "/home/inventory"
 
 <ERPInventory.ERPInventoryComponent />

BlazorGridExamples/Pages/FinanceGrid.razor

@@ -1,3 +1,3 @@
-@page "/finance-grid"
+@page "/home/finance"
 
 <FinanceGrid.FinanceGridComponent />

BlazorGridExamples/Pages/FleetManagement.razor

@@ -1,3 +1,3 @@
-@page "/fleet-management"
+@page "/home/fleet"
 
 <FleetManagement.FleetManagementComponent />

BlazorGridExamples/Pages/HRPortal.razor

@@ -1,4 +1,3 @@
-@page "/"
-@page "/hr-portal"
+@page "/home/hr-portal"
 
 <HRPortal.HRPortalComponent/>

BlazorGridExamples/Pages/SalesGrid.razor

@@ -1,3 +1,3 @@
-@page "/sales-grid"
+@page "/home/sales"
 
 <SalesGrid.SalesGridComponent />

BlazorGridExamples/Program.cs

@@ -16,13 +16,36 @@
 
 
 // Register IgniteUI Blazor
-builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
+builder.Services.AddIgniteUIBlazor(
+    typeof(IgbIconModule),
+    typeof(IgbGridModule),
+    typeof(IgbAvatarModule),
+    typeof(IgbBadgeModule),
+    typeof(IgbButtonModule),
+    typeof(IgbTabsModule),
+    typeof(IgbCarouselModule),
+    typeof(IgbCategoryChartModule),
+    typeof(IgbPieChartModule),
+    typeof(IgbSelectModule),
+    typeof(IgbLinearProgressModule),
+    typeof(IgbInputModule),
+    typeof(IgbHierarchicalGridModule),
+    typeof(IgbRatingModule),
+    typeof(IgbDataChartCoreModule),
+    typeof(IgbDataChartCategoryModule),
+    typeof(IgbDataChartInteractivityModule),
+    typeof(IgbTreeGridModule),
+    typeof(IgbPaginatorModule),
+    typeof(IgbIconButtonModule),
+    typeof(IgbDropdownModule),
+    typeof(IgbPivotGridModule),
+    typeof(IgbPivotDataSelectorModule));
 
 // Register Data Services for samples
 builder.Services.AddScoped<HRService>();
 builder.Services.AddScoped<InventoryService>();
 builder.Services.AddScoped<FinancialService>();
 builder.Services.AddScoped<FleetService>();
-builder.Services.AddScoped<SalesService>();
+builder.Services.AddScoped<SalesDataService>();
 
 await builder.Build().RunAsync();