Implement Org Chart/HR Portal sample with IgbTreeGrid and Fluent Light theme by Copilot · Pull Request #11 · IgniteUI/blazor-grid-examples

Copilot · 2026-03-17T15:38:52Z

The HR Portal sample existed but used a flat IgbGrid with HTTP-loaded data. This replaces it with an IgbTreeGrid displaying a hierarchical org chart using dynamic data from the Infragistics endpoint, using the Fluent Light theme as specified.

Model (`EmployeeData.cs`)

Added ParentId (nullable int) — required for flat tree binding via ForeignKey
Made Id non-nullable — semantic requirement for PrimaryKey
Retained Manager field (maps to "Manager" JSON property from the endpoint)

Service (`HRService.cs`)

HttpClient-based dynamic data loading from https://www.infragistics.com/grid-examples-data/data/hr/hr.json
Registered via AddHttpClient<HRService>() in both the standalone app and main host

Component (`HRPortalComponent.razor`)

<IgbTreeGrid Data="HRService.Data"
             PrimaryKey="Id"
             ForeignKey="ParentId"
             FilterMode="@FilterMode.ExcelStyleFilter"
             RowSelection="@GridSelectionMode.Multiple"
             ...>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>HR Portal</IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding />
            <IgbGridToolbarPinning />
            <IgbGridToolbarExporter ExportExcel="true" ExportCSV="false" />
            <IgbGridToolbarAdvancedFiltering />
        </IgbGridToolbarActions>
    </IgbGridToolbar>
    <IgbPaginator PerPage="20" />
    ...
</IgbTreeGrid>

All columns are sortable and resizable, including Manager. The Name column serves as the tree expansion column.

The toolbar matches the WebComponents design reference and includes:

Title: "HR Portal"
Column Hiding and Column Pinning actions
Excel Exporter (CSV disabled)
Advanced Filtering dialog
Conditional "Clear Sort" button — appears only when sorting is active and clears all sort expressions on click
Paginator with 20 rows per page

Theme & Navigation

Standalone App.razor: bootstrap.css → fluent.css (Fluent Light)
TabNavigation.razor: added per-tab Theme property; HR Portal tab now shows "Theme: Fluent" dynamically instead of the hardcoded "Bootstrap" label

Original prompt

This section details on the original issue you should resolve

<issue_title>Org Chart/HR Portal grid sample implementation</issue_title>
<issue_description>Implement an Org Chart/HR Portal grid sample matching the design from HR Portal sample in webcomponents.

Design reference:

Tree-grid for visualizing company hierarchical structure and employees' data (departments, teams, individual staff).

Drill-down/expand to show levels, employee details, and org chart-like navigation.

Features: inline expansion, dynamic data loading, filtering and sorting by employee properties, and collapsible nodes.

Matching Fluent/Light theme for look and feel.

Sample Design (WebComponents)

Theme: Fluent

Mode: Light

See also WebComponents repo for base implementation.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Org Chart/HR Portal grid sample implementation #5

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

…ta, and Fluent theme Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

dkamburov · 2026-03-17T21:26:54Z

src/samples/HRPortal.Library/Services/HRService.cs

        OnDataChanged?.Invoke();
    }
+
+    private static List<EmployeeData> GetOrgChartData() => new()


@copilot No, I want to use the dynamic data from the endpoint, revert this static data.

Done in commit a426cdf. Reverted HRService to use HttpClient fetching from https://www.infragistics.com/grid-examples-data/data/hr/hr.json. Also restored AddHttpClient<HRService>() in both Program.cs files and added back the Manager field to EmployeeData (which maps to the "Manager" JSON property from the endpoint). The IgbTreeGrid remains configured with PrimaryKey="Id" and ForeignKey="ParentId" to support hierarchical display when the endpoint data includes ParentID values.

…atic embedded data Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot · 2026-03-17T21:32:34Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

www.infragistics.com
- Triggering command: /usr/bin/curl curl -s REDACTED (dns block)
- Triggering command: /usr/bin/curl curl -v --max-time 10 REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

dkamburov · 2026-03-17T21:39:56Z

src/samples/HRPortal.Library/HRPortalComponent.razor

        <div class="mt-3">
            <small class="text-muted">
-                <i class="bi bi-info-circle"></i> Data updates every 3 seconds to simulate live HR data
+                <i class="bi bi-info-circle"></i> Performance scores update every 3 seconds to simulate live HR data


@copilot remove this, shouldn't be part of the sample

Removed in commit f49a6ea. Cleaned up the info footer div and the auto-update timer logic entirely.

dkamburov · 2026-03-17T21:40:20Z

src/samples/HRPortal.Library/HRPortalComponent.razor

-            <IgbColumn Field="Location" Header="Location" Width="10%" MinWidth="90px"></IgbColumn>
-            <IgbColumn Field="Performance" Header="Performance" DataType="GridColumnDataType.Number" Width="8%" MinWidth="95px"></IgbColumn>
-        </IgbGrid>
+        <IgbTreeGrid Data="HRService.Data"


@copilot I need a toolbar, check the design

Added in commit 2f39cd1. The toolbar now matches the WebComponents design reference with:

Title: "HR Portal"

Actions: Column Hiding, Column Pinning, Excel Exporter, Advanced Filtering

Conditional "Clear Sort" button — appears only when sorting is active, calls ClearSortAsync() when clicked

Paginator with 20 rows per page

…talComponent Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

…ltering, and paginator to HRPortalComponent Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot · 2026-03-17T21:49:29Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

www.infragistics.com
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Added childkey to fix the hierarchy in treegrid Added a large set of image files for various countries and UI elements.

…nt theme for hrportal component

… for their columns

Replaced global IgniteUI.Blazor theme links with dynamic, per-component theme loading using a new scope-css.js utility. Updated all projects to use IgniteUI.Blazor 25.2.83 (non-trial). Refactored TabNavigation and HRPortal components to load and scope Material and Fluent themes only where needed, enabling multiple themes in the same app. Cleaned up related CSS and improved code consistency.

Eliminated the OnDataChanged event and related logic from HRService and HRPortalComponent. The component no longer subscribes to data change events or implements IDisposable for event unsubscription. State updates are now managed explicitly rather than via event notifications.

Moved theme scoping logic from Blazor components to scope-css.js, which now applies IgniteUI themes globally on load. Updated App.razor to load scope-css.js from the local scripts directory and removed redundant script tags. Added null checks to icon registration in HRPortalComponent.razor to prevent potential errors.

Refactored TabNavigation.razor markup for improved nesting and semantic grouping of tab info and actions. Added box-sizing: border-box to .tab-item in app.css for more consistent sizing and layout. No functional changes to logic or behavior.

Initial plan

a2f4cfc

Copilot AI assigned Copilot and dkamburov Mar 17, 2026

Copilot started work on behalf of dkamburov March 17, 2026 15:38 View session

Implement Org Chart/HR Portal with IgbTreeGrid, embedded org chart da…

5d8a42a

…ta, and Fluent theme Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add Org Chart/HR Portal grid sample implementation~~ Implement Org Chart/HR Portal sample with IgbTreeGrid and Fluent Light theme Mar 17, 2026

Copilot AI requested a review from dkamburov March 17, 2026 16:01

Copilot finished work on behalf of dkamburov March 17, 2026 16:01

dkamburov reviewed Mar 17, 2026

View reviewed changes

Copilot started work on behalf of dkamburov March 17, 2026 21:27 View session

Restore HttpClient-based dynamic data loading in HRService, revert st…

a426cdf

…atic embedded data Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot AI requested a review from dkamburov March 17, 2026 21:32

Copilot finished work on behalf of dkamburov March 17, 2026 21:32

dkamburov reviewed Mar 17, 2026

View reviewed changes

Copilot started work on behalf of dkamburov March 17, 2026 21:40 View session

dkamburov reviewed Mar 17, 2026

View reviewed changes

Remove performance score info footer and auto-update timer from HRPor…

f49a6ea

…talComponent Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot AI requested a review from dkamburov March 17, 2026 21:42

Copilot finished work on behalf of dkamburov March 17, 2026 21:42

Copilot started work on behalf of dkamburov March 17, 2026 21:42 View session

Add IgbGridToolbar with title, hiding, pinning, exporter, advanced fi…

2f39cd1

…ltering, and paginator to HRPortalComponent Co-authored-by: dkamburov <1182001+dkamburov@users.noreply.github.com>

Copilot finished work on behalf of dkamburov March 17, 2026 21:49

dkamburov added 6 commits March 18, 2026 17:06

Add new image assets to project

89a4b2a

Added childkey to fix the hierarchy in treegrid Added a large set of image files for various countries and UI elements.

Add employee avatars to grid and update UI assets

10c9888

Update IgniteUI.Blazor.Trial to 25.2.77 and add headcontent with flue…

4edf813

…nt theme for hrportal component

Fix Blazor event handlers and update grid styling

5aaf0cb

Add svg country flag icons and contact icons to HR grid and templates…

5111567

… for their columns

dkamburov added 4 commits March 31, 2026 10:24

Remove Blazor error UI and Bootstrap CSS reference

25f1e8c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Org Chart/HR Portal sample with IgbTreeGrid and Fluent Light theme#11

Implement Org Chart/HR Portal sample with IgbTreeGrid and Fluent Light theme#11
Copilot wants to merge 15 commits intomasterfrom
copilot/implement-org-chart-sample

Copilot AI commented Mar 17, 2026 •

edited

Loading

Uh oh!

dkamburov Mar 17, 2026

Uh oh!

Copilot AI Mar 17, 2026

Uh oh!

Copilot AI commented Mar 17, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

dkamburov Mar 17, 2026

Uh oh!

Copilot AI Mar 17, 2026

Uh oh!

dkamburov Mar 17, 2026

Uh oh!

Copilot AI Mar 17, 2026

Uh oh!

Copilot AI commented Mar 17, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Model (EmployeeData.cs)

Service (HRService.cs)

Component (HRPortalComponent.razor)

Theme & Navigation

Comments on the Issue (you are @copilot in this section)

Uh oh!

dkamburov Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 17, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

dkamburov Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

dkamburov Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 17, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 17, 2026 •

edited

Loading

Model (`EmployeeData.cs`)

Service (`HRService.cs`)

Component (`HRPortalComponent.razor`)