Org Chart/HR Portal sample: tree grid with scoped Fluent theme and templated cells#20
Open
Zneeky wants to merge 9 commits into
Open
Conversation
… templated cells and WC parity - Register the missing IgbTreeGrid / IgbPaginator / IgbIconButton modules so the tree grid renders. - Apply the Fluent / Light theme scoped to #fluent-section: the previous nested `@import` inside a selector was invalid CSS, so the grid was actually rendering the host Material theme. Generate fluent-theme.css by scoping the prebuilt Fluent component + grid theme CSS to #fluent-section, and rescope the cell styles to match. - Load the cell templates from index.html with the load-order guard (the in-component `<script type="module">` never executed under Blazor), and fix the contact-template field typo (data.Contacs -> data.Contacts). - Match the Web Components sample: Gross Salary as currency, Hire Date as ISO yyyy-MM-dd via a date template, and multipleCascade row selection. - Remove unused RCL boilerplate.
… contact icons Fluent blue - Widen the columns (they summed to ~83%, leaving a ~237px empty strip on the right) so the grid fills the available width. - Color the contact icon buttons with the Fluent primary (var(--ig-primary-500)) instead of the browser default link blue / dark icon part.
… min-widths Remove the explicit percentage Width values from the columns and keep only MinWidth, letting the tree grid auto-distribute the available width (matching the Web Components sample). The columns fill the grid evenly with no right-side gap.
…header/buttons, match WC grid sizing Fleet sample: - Remove the per-column filter row; keep the advanced-filtering toolbar dialog and button. - Match the WC grid sizing: scope --ig-size-small to the grid (toolbar 44px), set the header sort icon to 15px (the grid otherwise renders it at the default 24px), row height to 32px, and use MinWidth-only columns (drop the percentage widths so they auto-distribute and fill the grid). - Make the grid flush by dropping the .fleet-container 1rem padding. - Match the WC toolbar title exactly: soft-gray #e0e0e0 (was near-white #fafafa) and left-aligned at the toolbar padding (hide the empty portaled title slot that pushed it ~16px right). App shell (NavMenu): - Re-render the nav on navigation (subscribe to NavigationManager.LocationChanged) so the active tab and the current-tab-info no longer go stale after switching samples. - Use the exact per-sample title/description/theme/mode from the WC home view (fixes ERP and Sales, which were defaulting to the Bootstrap theme label). - Fix the Download and Fullscreen buttons: IgbButton (Lite) exposes no click event, so wrap each in a span with @OnClick and add shell-interop.js (real document fullscreen; Download fetches the repo zip; View More opens the docs in a new tab).
…id height to 162px
…blazor' into aahmedov/org-chart-hr-portal-sample
…ia fullscreenchange
…blazor' into aahmedov/org-chart-hr-portal-sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #5
Implements the Org Chart / HR Portal sample (#5) - a tree grid of the company employee hierarchy, matching the IgniteUI Web Components HR Portal example.
Highlights
IgbTreeGridwithChildDataKey="Employees"- expand/collapse the org hierarchy (118 employees), with a pinned avatar column, multi-cascade row selection, Excel-style + advanced filtering, sorting with a conditional Clear Sort button, column hiding/pinning, Excel export, and a 20-per-page paginator.#fluent-section. (The sample previously had an@importnested inside a selector — invalid CSS — so it was silently falling back to the host Material theme. Now--ig-primary-500resolves to the Fluent blue#0078d4.)yyyy-MM-dd; Gross Salary as currency.Notes
IgbTreeGrid/IgbPaginator/IgbIconButtonmodules (the tree grid wasn't rendering before).<script type="module">never executed under Blazor) and fixed adata.Contacstypo.MinWidthonly (no fixed percentages); the grid auto-distributes the remaining width.Verification
Built and exercised in the browser: the tree hierarchy expands, all templated cells render (avatars, flags, blue contact icons), ISO dates + currency format correctly, the columns fill the width, and there are no console errors.