Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
52f8806
feat(fleet-management-sample): build master-detail grid with scoped d…
Zneeky Jun 8, 2026
f199427
feat(fleet-management-sample): match Angular detail layout and add in…
Zneeky Jun 8, 2026
5af74dc
feat(fleet-management-sample): compact grid sizing, toolbar layout an…
Zneeky Jun 9, 2026
bef53d2
feat(fleet-management-sample): native cell templates, detail refactor…
Zneeky Jun 9, 2026
2bda74d
feat(fleet-management-sample): give the utilization chart the same bo…
Zneeky Jun 10, 2026
ad3949b
feat(fleet-management-sample): restructure the utilization chart as a…
Zneeky Jun 10, 2026
500f9c6
feat(fleet-management-sample): mark the current trip with a Current b…
Zneeky Jun 10, 2026
c6a96a7
feat(sales-dashboard-sample): pivot grid dashboard with data selector…
Zneeky Jun 10, 2026
46e2c6a
feat(sales-dashboard-sample): web-components-aligned layout; temporar…
Zneeky Jun 10, 2026
f50f52e
feat(financial-portfolio-sample): live portfolio grid with templated …
Zneeky Jun 10, 2026
68786f3
feat(financial-portfolio-sample): web-components toolbar with filter …
Zneeky Jun 10, 2026
5b69c6c
feat(financial-portfolio-sample): apply the full Bootstrap grid theme…
Zneeky Jun 10, 2026
3da544e
feat(financial-portfolio-sample): per-keystroke search, bootstrap inp…
Zneeky Jun 10, 2026
bc71eb9
feat(financial-portfolio-sample): fit all columns and thicken the all…
Zneeky Jun 10, 2026
f12570a
fix(financial-portfolio-sample): thicken the allocation bar track and…
Zneeky Jun 10, 2026
6720444
fix(fleet-management-sample): remove column filtering, fix shell tab/…
Zneeky Jun 11, 2026
19c6e65
Merge branch 'aahmedov/fleet-managment-sample-blazor' into aahmedov/s…
Zneeky Jun 11, 2026
750c54e
feat(sales-dashboard-sample): WC-accurate pivot dashboard with bundle…
Zneeky Jun 11, 2026
ca8757f
chore(sales-dashboard-sample): remove comments
Zneeky Jun 11, 2026
aee969e
fix(routing): match the WC route structure with /home sample endpoints
Zneeky Jun 11, 2026
f60f2d2
fix(fleet-management-sample): remove 2px page scroll by correcting gr…
Zneeky Jun 11, 2026
6ee84b9
Merge remote-tracking branch 'origin/aahmedov/fleet-managment-sample-…
Zneeky Jun 11, 2026
fc5b34f
Merge remote-tracking branch 'origin/aahmedov/fleet-managment-sample-…
Zneeky Jun 11, 2026
66e0a47
feat(shell): hide the sample tab strip in fullscreen and sync state v…
Zneeky Jun 12, 2026
8edd04f
Merge remote-tracking branch 'origin/aahmedov/fleet-managment-sample-…
Zneeky Jun 12, 2026
6e6f04f
Merge remote-tracking branch 'origin/aahmedov/fleet-managment-sample-…
Zneeky Jun 12, 2026
cf63527
feat(shell): replace the Unicode toolbar icons with the WC SVGs rende…
Zneeky Jun 12, 2026
8ecd5e6
Merge pull request #21 from IgniteUI/aahmedov/sales-dashboard-sample-…
Zneeky Jun 18, 2026
b766b50
fix(theming): replace fleet-dark.css with runtime scopeThemeToElement…
Zneeky Jun 18, 2026
2b268be
Merge branch 'aahmedov/fleet-managment-sample-blazor' of https://gith…
Zneeky Jun 18, 2026
f54e7b8
fix(theming): replace sales static CSS dumps with runtime scopeThemeT…
Zneeky Jun 18, 2026
998225d
Merge branch 'aahmedov/fleet-managment-sample-blazor' of https://gith…
Jun 18, 2026
838ec4b
fix(financial grid): unifying currency formatting
Jun 18, 2026
febbc7e
chore(*): exclude e2e testing for now
Zneeky Jun 18, 2026
2af2408
Merge branch 'aahmedov/fleet-managment-sample-blazor' into aahmedov/f…
Zneeky Jun 18, 2026
69750f0
fix(theming): migrate Finance to runtime scopeThemeToElement (Bootstrap)
Zneeky Jun 18, 2026
3ace80b
Merge remote-tracking branch 'origin/aahmedov/financial-portfolio-sam…
Zneeky Jun 22, 2026
f75d496
fix(financial-portfolio): match WC typography for title, filter input…
Zneeky Jun 22, 2026
3bfd465
fix(financial-portfolio): fill the viewport with no page scroll (WC p…
Zneeky Jun 22, 2026
bf717f5
fix(financial-portfolio): blue toolbar buttons, bold headers, row-sel…
Zneeky Jun 22, 2026
9da62ce
fix(financial-portfolio): tint outlined toolbar button borders blue
Zneeky Jun 22, 2026
b922ef2
feat(shell): add opt-in full-theme scoping to scope-css.js; bump Igni…
Zneeky Jun 22, 2026
66acc46
Merge branch 'aahmedov/fleet-managment-sample-blazor' into aahmedov/f…
Zneeky Jun 22, 2026
a029821
fix(financial-portfolio): use full-theme scoping for the Bootstrap se…
Zneeky Jun 22, 2026
361cf07
fix(shell): fill the viewport with no page scroll
Zneeky Jun 22, 2026
edf57a5
fix(fleet-management): show the toolbar title in white (WC parity)
Zneeky Jun 22, 2026
b48d7ba
fix(sales-dashboard): match the WC sample 1:1
Zneeky Jun 22, 2026
43f45bc
Merge branch 'aahmedov/fleet-managment-sample-blazor' into aahmedov/f…
Zneeky Jun 22, 2026
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
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,9 @@ npm-debug.log
# OS files
.DS_Store
Thumbs.db


# Others
*.claude
*.mcp.json
e2e
2 changes: 1 addition & 1 deletion BlazorGridExamples/BlazorGridExamples.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
173 changes: 124 additions & 49 deletions BlazorGridExamples/Layout/NavMenu.razor
Original file line number Diff line number Diff line change
@@ -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)
{
Expand All @@ -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>
Expand All @@ -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();
}
}
4 changes: 3 additions & 1 deletion BlazorGridExamples/Pages/ERPInventory.razor
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@page "/erp-inventory"
@page "/"
@page "/home"
@page "/home/inventory"

<ERPInventory.ERPInventoryComponent />
2 changes: 1 addition & 1 deletion BlazorGridExamples/Pages/FinanceGrid.razor
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@page "/finance-grid"
@page "/home/finance"

<FinanceGrid.FinanceGridComponent />
2 changes: 1 addition & 1 deletion BlazorGridExamples/Pages/FleetManagement.razor
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@page "/fleet-management"
@page "/home/fleet"

<FleetManagement.FleetManagementComponent />
3 changes: 1 addition & 2 deletions BlazorGridExamples/Pages/HRPortal.razor
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@page "/"
@page "/hr-portal"
@page "/home/hr-portal"

<HRPortal.HRPortalComponent/>
2 changes: 1 addition & 1 deletion BlazorGridExamples/Pages/SalesGrid.razor
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@page "/sales-grid"
@page "/home/sales"

<SalesGrid.SalesGridComponent />
19 changes: 17 additions & 2 deletions BlazorGridExamples/Program.cs
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,28 @@


// 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(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();
Loading