Financial Portfolio sample: live data grid with templated cells and Bootstrap theme#18
Open
Zneeky wants to merge 20 commits into
Open
Conversation
…cells and Bootstrap theme - Rebuild the Financial Portfolio grid to match the IgniteUI Web Components finance sample: 11 columns (symbol, asset, position, prices, daily change, market value, net profit/loss, allocation, holding period) with sorting, filtering, column hiding/pinning and multi-row selection. - Render image/icon/bar cells via native lit-html BodyTemplateScript so the live 3s price updates do not flicker (the fleet-sample lesson): company-logo avatars, green/red profit and loss values with trending up/down icons, and an allocation progress bar. - Fix the live updates for Blazor WebAssembly: replace System.Timers.Timer (does not fire reliably on the single WASM thread) with a PeriodicTimer loop, and assign a new data list reference each tick so the grid re-syncs the mutated rows. - Apply the Bootstrap / Light theme scoped to the finance section; add HoldingPeriod to the model; remove unused RCL boilerplate.
…bar and exporter - Replace the per-column filter row with the Web Components toolbar layout: the title and a "Filter by Asset" search bar with the hiding, pinning and Excel exporter actions. - The search filters by Symbol or Asset (case-insensitive contains) via a client-side LINQ view bound to the grid, which keeps working through the live price updates.
… and match the toolbar layout - Previously only the Bootstrap color *tokens* were scoped to the section, so the grid kept the host's Material *structure*. Scope the actual Bootstrap grid + component theme CSS to #finance-section (selectors prefixed; :root rescoped; @keyframes/@font-face/@import dropped so the host theme still provides them) so the toolbar buttons, inputs, checkboxes and grid chrome render as Bootstrap. - Match the Web Components toolbar layout: title on the left, the "Filter by Asset" search bar on the right next to the hiding/pinning/exporter actions (the title/search live in portal wrappers, so flex-start + margin-left:auto on the search rather than space-between). - Use the full "Average Cost/Share" column header.
…ut styling, remove section gap - The IgbInput Input event does not fire on typing and ValueChanged is blur-only, so the search only updated on blur. Replace it with a native <input type="search"> bound via @Bind:event="oninput", so the grid filters on every keystroke. - Style the search field to match the Bootstrap design: white field, gray border, rounded corners, blue focus ring and the native clear button. - Drop the .finance-container padding that left a gap between the themed section and the grid.
…ocation bar - The column widths summed to 109%, so the grid overflowed horizontally and the last column (Holding Period) was pushed off-screen. Reduce the widths to ~95% so every column, including Holding Period, fits within the grid without scrolling. - Make the allocation progress bar noticeably thicker (12px, large size) to match the design.
… close the right gap - The previous bar fix sized the igc-linear-progress host (12px), but its internal base/track/fill parts stayed fixed at 4px. Size those ::part elements directly so the bar is actually thick. - Widen the Asset column so the data columns fill the grid width (~97.5%), removing the empty space that was left on the right edge.
…blazor' into aahmedov/financial-portfolio-sample-blazor
…blazor' into aahmedov/financial-portfolio-sample-blazor
…ub.com/IgniteUI/blazor-grid-examples into aahmedov/financial-portfolio-sample-blazor
…inancial-portfolio-sample-blazor # Conflicts: # BlazorGridExamples/Program.cs
Replace the hand-generated finance-theme.css (613KB Bootstrap grid+component dump scoped to #finance-section) with scopeThemeToElement calls that scope the stock Bootstrap light theme tokens to #finance-section at runtime -- same pattern as Fleet (dark Material) and Sales (Indigo). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ple-blazor' into aahmedov/financial-portfolio-sample-blazor
…, allocation bar Align the Finance sample with the web-components reference (live + local webcomponents-grid-examples/projects/finance-grid): - toolbar title: Bootstrap system font, 16px, weight 400, muted gray (--ig-gray-600) - "Filter by Asset" input + placeholder: 16px Bootstrap font, --ig-gray-700 - allocation linear-progress fill: Bootstrap primary blue (--ig-primary-500 / #0d6efd) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…arity) Match the web-components layout where the dashboard fills the viewport and the grid scrolls internally: - body: overflow hidden so the page never shows its own vertical scrollbar - demo-container: height 100vh - finance grid: Height="100%" (fills the flex container) instead of calc(100vh - 110px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ection checkbox column Further WC parity for the Finance sample: - toolbar action buttons (hiding/pinning/export): Bootstrap primary blue (#0d6efd) instead of grey - column headers: bold (700) solid dark, matching the WC bold black headers - restore RowSelection=Multiple (dropped in the currency-formatting merge) so the row-selector checkbox column is shown, per the grid Selection docs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The outlined toolbar buttons (hiding/pinning/export) kept a grey border after the foreground was switched to primary; set the border-color to the Bootstrap primary too so the buttons fully match the WC reference. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…inancial-portfolio-sample-blazor
…ction Opt into scopeThemeToElement's full mode (3rd arg) for the base + grid Bootstrap themes, so the Finance grid's buttons (text/border/icon + hover), checkboxes (square) and headers (bold) are driven by the real Bootstrap component theme instead of CSS patches. Removed the now-redundant manual overrides from finance.css (button color/border, header weight, title typography, allocation fill) -- the theme provides them, matching the WC sample 1:1. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…inancial-portfolio-sample-blazor # Conflicts: # BlazorGridExamples/wwwroot/css/app.css
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 #4
Implements the Financial Portfolio sample (#4) — a live
IgbGridportfolio matching the IgniteUI Web Components finance example.Highlights
BodyTemplateScript) so the live updates don't flicker: company-logo avatars, green/red profit-loss values with trending up/down icons, and a (thick) allocation progress bar.System.Timers.Timerdoesn't fire reliably on the single WASM thread → switched to aPeriodicTimerloop; and in-place mutations don't re-sync to the grid → assign a new data-list reference each tick.#finance-section(not just the color tokens), so the toolbar buttons, inputs, checkboxes and grid chrome render as real bootstrap.Notes
samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.jsand loaded from the host page; company logos copied intowwwroot/companies.<input type="search">with@bind:event="oninput"becauseIgbInput'sInputevent doesn't fire on typing andValueChangedis blur-only.mcp-inconsistenciestracker (sparseIgbLinearProgressAPI;search_apiignoring the framework filter).Verification
Built and exercised in the browser: all 11 columns render and fit, prices tick live without flicker, the search filters on every keystroke, and there are no console errors.