Financial Portfolio sample: live data grid with templated cells and Bootstrap theme#18
Open
Zneeky wants to merge 8 commits into
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
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.