IgniteUI · Zneeky · Jun 8, 2026 · Jun 8, 2026 · Jun 9, 2026 · Jun 9, 2026
diff --git a/BlazorGridExamples/Program.cs b/BlazorGridExamples/Program.cs
@@ -27,6 +27,8 @@
     typeof(IgbCategoryChartModule),
     typeof(IgbPieChartModule),
     typeof(IgbSelectModule),
+    typeof(IgbLinearProgressModule),
+    typeof(IgbInputModule),
     typeof(IgbDropdownModule),
     typeof(IgbPivotGridModule),
     typeof(IgbPivotDataSelectorModule));

diff --git a/BlazorGridExamples/wwwroot/index.html b/BlazorGridExamples/wwwroot/index.html
@@ -17,6 +17,7 @@
     <script src="scripts/scope-css.js"></script>
     <script src="scripts/shell-interop.js"></script>
     <script src="_content/FleetManagement/scripts/fleet-grid-templates.js"></script>
+    <script src="_content/FinanceGrid/scripts/finance-grid-templates.js"></script>
 </head>
 
 <body>

diff --git a/samples/FinanceGrid/ExampleJsInterop.cs b/samples/FinanceGrid/ExampleJsInterop.cs
diff --git a/samples/FinanceGrid/FinanceGridComponent.razor b/samples/FinanceGrid/FinanceGridComponent.razor
@@ -1,97 +1,128 @@
-@using FinanceGrid.Services
+@using FinanceGrid.Services
 @using FinanceGrid.Models
 @using IgniteUI.Blazor.Controls
+@using Microsoft.JSInterop
 @inject FinancialService FinancialService
+@inject IJSRuntime JS
 @implements IDisposable
 
-<div class="container-fluid p-4">
-    @if (isLoading)
-    {
-        <div class="text-center my-5">
-            <div class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>
-            <p class="mt-3">Loading financial data...</p>
-        </div>
-    }
-    else if (!FinancialService.Data.Any())
-    {
-        <div class="alert alert-warning" role="alert">
-            No data available. Please check your connection.
-        </div>
-    }
-    else
-    {
-        <IgbGrid Data="FinancialService.Data" 
-                 AutoGenerate="false"
-                 AllowFiltering="true"
-                 Height="calc(100vh - 200px)"
-                 @ref="grid">
-            <IgbColumn Field="Id" Header="Symbol" Width="7%" MinWidth="68px"></IgbColumn>
-            <IgbColumn Field="HoldingName" Header="Asset" Width="15%" MinWidth="100px" Sortable="true"></IgbColumn>
-            <IgbColumn Field="Value.CurrentPrice" Header="Last Price" DataType="GridColumnDataType.Number" Width="10%" MinWidth="80px"></IgbColumn>
-            <IgbColumn Field="DailyPercentageChange" Header="Change %" DataType="GridColumnDataType.Number" Width="10%" MinWidth="85px"></IgbColumn>
-            <IgbColumn Field="MarketValue" Header="Market Value" DataType="GridColumnDataType.Number" Width="10%" MinWidth="100px"></IgbColumn>
-            <IgbColumn Field="ProfitLossValue" Header="NET Profit" DataType="GridColumnDataType.Number" Width="10%" MinWidth="90px"></IgbColumn>
-            <IgbColumn Field="ProfitLossPercentage" Header="NET Profit %" DataType="GridColumnDataType.Number" Width="12%" MinWidth="95px"></IgbColumn>
-            <IgbColumn Field="Allocation" Header="Allocation" DataType="GridColumnDataType.Number" Width="10%" MinWidth="85px"></IgbColumn>
-        </IgbGrid>
-        <div class="mt-3">
-            <small class="text-muted">
-                <i class="bi bi-info-circle"></i> Data updates every 3 seconds to simulate live market data
-            </small>
-        </div>
-    }
-</div>
+<link href="_content/FinanceGrid/styles/finance.css" rel="stylesheet" />
 
-<style>
-    .profit-condition {
-        color: #28a745;
-        font-weight: 600;
-    }
+<div id="finance-section" class="ig-typography ig-scrollbar">
+    <div class="finance-container">
+        @if (isLoading)
+        {
+            <div class="text-center my-5">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-3">Loading financial data...</p>
+            </div>
+        }
+        else if (!FinancialService.Data.Any())
+        {
+            <div class="alert alert-warning" role="alert">
+                No data available. Please check your connection.
+            </div>
+        }
+        else
+        {
+            <IgbGrid Data="FilteredData"
+                     PrimaryKey="Id"
+                     AutoGenerate="false"
+                     RowSelection="GridSelectionMode.Multiple"
+                     Height="100%"
+                     Width="100%"
+                     class="finance-grid"
+                     @ref="grid">
+                <IgbGridToolbar>
+                    <IgbGridToolbarTitle>Financial Portfolio</IgbGridToolbarTitle>
+                    <input type="search"
+                           placeholder="Filter by Asset"
+                           class="finance-search"
+                           @bind="searchTerm"
+                           @bind:event="oninput" />
+                    <IgbGridToolbarActions>
+                        <IgbGridToolbarHiding />
+                        <IgbGridToolbarPinning />
+                        <IgbGridToolbarExporter />
+                    </IgbGridToolbarActions>
+                </IgbGridToolbar>
 
-    .loss-condition {
-        color: #dc3545;
-        font-weight: 600;
-    }
-</style>
+                <IgbColumn Field="Id" Header="Symbol" Sortable="true" Width="6%" MinWidth="68px"></IgbColumn>
+                <IgbColumn Field="HoldingName" Header="Asset" Sortable="true" Width="16.5%" MinWidth="110px" BodyTemplateScript="financeAssetCell"></IgbColumn>
+                <IgbColumn Field="Positions" Header="Position" DataType="GridColumnDataType.Number" Sortable="true" Width="6%" MinWidth="70px"></IgbColumn>
+                <IgbColumn Field="Value.BoughtPrice" Header="Average Cost/Share" DataType="GridColumnDataType.Currency" Sortable="true" Width="10%" MinWidth="100px" PipeArgs="@currencyDigitsFormat"></IgbColumn>
+                <IgbColumn Field="Value.CurrentPrice" Header="Last Price" DataType="GridColumnDataType.Currency" Sortable="true" Width="7%" MinWidth="75px" PipeArgs="@currencyDigitsFormat"></IgbColumn>
+                <IgbColumn Field="DailyPercentageChange" Header="Daily Change %" Sortable="true" Width="9%" MinWidth="105px" BodyTemplateScript="financePercentCell"></IgbColumn>
+                <IgbColumn Field="MarketValue" Header="Market Value" DataType="GridColumnDataType.Currency" Sortable="true" Width="9%" MinWidth="95px" PipeArgs="@currencyDigitsFormat"></IgbColumn>
+                <IgbColumn Field="ProfitLossValue" Header="NET Profit/Loss" Sortable="true" Width="9%" MinWidth="105px" BodyTemplateScript="financeProfitValueCell"></IgbColumn>
+                <IgbColumn Field="ProfitLossPercentage" Header="NET Profit/Loss %" Sortable="true" Width="9%" MinWidth="115px" BodyTemplateScript="financePercentCell"></IgbColumn>
+                <IgbColumn Field="Allocation" Header="Allocation" Sortable="true" Width="10%" MinWidth="100px" BodyTemplateScript="financeAllocationCell"></IgbColumn>
+                <IgbColumn Field="HoldingPeriod" Header="Holding Period" Sortable="true" MinWidth="50px" BodyTemplateScript="financeHoldingPeriodCell"></IgbColumn>
+            </IgbGrid>
+        }
+    </div>
+</div>
 
 @code {
     private bool isLoading = true;
-    private System.Timers.Timer? updateTimer;
+    private PeriodicTimer? updateTimer;
     private IgbGrid? grid;
+    private string searchTerm = "";
+    private IgbColumnPipeArgs currencyDigitsFormat = new IgbColumnPipeArgs { DigitsInfo = "1.2-2" };
+
+    private List<FinancialData> FilteredData =>
+        string.IsNullOrWhiteSpace(searchTerm)
+            ? FinancialService.Data
+            : FinancialService.Data.Where(d =>
+                (d.Id != null && d.Id.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)) ||
+                (d.HoldingName != null && d.HoldingName.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)))
+              .ToList();
+
 
     protected override async Task OnInitializedAsync()
     {
         FinancialService.OnDataChanged += OnDataChanged;
         await FinancialService.LoadDataAsync();
         isLoading = false;
+        _ = RunLiveUpdatesAsync();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // Re-theme this sample to Bootstrap at the component level (full=true) by re-scoping
+            // the whole stock theme under #finance-section, so buttons/checkboxes/headers match
+            // Bootstrap exactly. The scopeThemeToElement helper dedupes, so remounts won't re-inject.
+            await JS.InvokeVoidAsync("scopeThemeToElement",
+                "_content/IgniteUI.Blazor/themes/light/bootstrap.css", "#finance-section", true);
+            await JS.InvokeVoidAsync("scopeThemeToElement",
+                "_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css", "#finance-section", true);
+        }
+    }
 
-        // Start auto-update timer (every 3 seconds)
-        updateTimer = new System.Timers.Timer(3000);
-        updateTimer.Elapsed += (sender, args) =>
+    private async Task RunLiveUpdatesAsync()
+    {
+        updateTimer = new PeriodicTimer(TimeSpan.FromSeconds(3));
+        while (await updateTimer.WaitForNextTickAsync())
         {
             FinancialService.UpdateAllPrices();
-        };
-        updateTimer.Start();
+        }
     }
 
     private void OnDataChanged()
     {
         InvokeAsync(() =>
         {
             StateHasChanged();
-            // Trigger grid change detection to refresh with updated data
-            if (grid != null)
-            {
-                grid.MarkForCheck();
-            }
+            grid?.MarkForCheck();
         });
     }
 
     public void Dispose()
     {
-        updateTimer?.Stop();
         updateTimer?.Dispose();
         FinancialService.OnDataChanged -= OnDataChanged;
     }

diff --git a/samples/FinanceGrid/FinanceGridComponent.razor.css b/samples/FinanceGrid/FinanceGridComponent.razor.css
diff --git a/samples/FinanceGrid/Models/FinancialData.cs b/samples/FinanceGrid/Models/FinancialData.cs
@@ -33,6 +33,9 @@ public class FinancialData
 
     [JsonPropertyName("dailyPercentageChange")]
     public double DailyPercentageChange { get; set; }
+
+    [JsonPropertyName("holdingPeriod")]
+    public int HoldingPeriod { get; set; }
 }
 
 public class PriceValue

diff --git a/samples/FinanceGrid/Services/FinancialService.cs b/samples/FinanceGrid/Services/FinancialService.cs
@@ -75,6 +75,8 @@ public void UpdateAllPrices()
             dataRow.DailyPercentageChange = randomizedData.DailyPercentageChange;
         }
 
+        // New list reference so the Blazor grid re-syncs the mutated rows to the web component.
+        Data = new List<FinancialData>(Data);
         OnDataChanged?.Invoke();
     }
 
@@ -93,8 +95,7 @@ private double CalculateProfitLossPercentage(double profitLossValue, double boug
 
     private double CalculateDailyPercentageChange(double initialPrice, double finalPrice)
     {
-        var priceDifference = finalPrice - initialPrice;
-        return (priceDifference / initialPrice) * 100;
+        return (finalPrice - initialPrice) / initialPrice;
     }
 
     private (double NewPrice, double ProfitLossValue, double ProfitLossPercentage, double MarketValue, double DailyPercentageChange) 

diff --git a/samples/FinanceGrid/wwwroot/background.png b/samples/FinanceGrid/wwwroot/background.png
diff --git a/samples/FinanceGrid/wwwroot/companies/3M.png b/samples/FinanceGrid/wwwroot/companies/3M.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Adobe.png b/samples/FinanceGrid/wwwroot/companies/Adobe.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Advanced.png b/samples/FinanceGrid/wwwroot/companies/Advanced.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Airbnb.png b/samples/FinanceGrid/wwwroot/companies/Airbnb.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Alibaba.png b/samples/FinanceGrid/wwwroot/companies/Alibaba.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Alphabet.png b/samples/FinanceGrid/wwwroot/companies/Alphabet.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Amazon.com.png b/samples/FinanceGrid/wwwroot/companies/Amazon.com.png
diff --git a/samples/FinanceGrid/wwwroot/companies/American.png b/samples/FinanceGrid/wwwroot/companies/American.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Apple.png b/samples/FinanceGrid/wwwroot/companies/Apple.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Bitcoin.png b/samples/FinanceGrid/wwwroot/companies/Bitcoin.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Boeing.png b/samples/FinanceGrid/wwwroot/companies/Boeing.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Booking.png b/samples/FinanceGrid/wwwroot/companies/Booking.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Caterpillar.png b/samples/FinanceGrid/wwwroot/companies/Caterpillar.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Chevron.png b/samples/FinanceGrid/wwwroot/companies/Chevron.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Cisco.png b/samples/FinanceGrid/wwwroot/companies/Cisco.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Coca-Cola.png b/samples/FinanceGrid/wwwroot/companies/Coca-Cola.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Costco.png b/samples/FinanceGrid/wwwroot/companies/Costco.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Dominos.png b/samples/FinanceGrid/wwwroot/companies/Dominos.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Ethereum.png b/samples/FinanceGrid/wwwroot/companies/Ethereum.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Exxon.png b/samples/FinanceGrid/wwwroot/companies/Exxon.png
diff --git a/samples/FinanceGrid/wwwroot/companies/FedEx.png b/samples/FinanceGrid/wwwroot/companies/FedEx.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Ford.png b/samples/FinanceGrid/wwwroot/companies/Ford.png
diff --git a/samples/FinanceGrid/wwwroot/companies/General.png b/samples/FinanceGrid/wwwroot/companies/General.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Honeywell.png b/samples/FinanceGrid/wwwroot/companies/Honeywell.png
diff --git a/samples/FinanceGrid/wwwroot/companies/IBM.png b/samples/FinanceGrid/wwwroot/companies/IBM.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Intel.png b/samples/FinanceGrid/wwwroot/companies/Intel.png
diff --git a/samples/FinanceGrid/wwwroot/companies/JPMorgan.png b/samples/FinanceGrid/wwwroot/companies/JPMorgan.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Johnson.png b/samples/FinanceGrid/wwwroot/companies/Johnson.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Kellogg.png b/samples/FinanceGrid/wwwroot/companies/Kellogg.png
diff --git a/samples/FinanceGrid/wwwroot/companies/McDonalds.png b/samples/FinanceGrid/wwwroot/companies/McDonalds.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Microsoft.png b/samples/FinanceGrid/wwwroot/companies/Microsoft.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Mondelez.png b/samples/FinanceGrid/wwwroot/companies/Mondelez.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Morgan.png b/samples/FinanceGrid/wwwroot/companies/Morgan.png
diff --git a/samples/FinanceGrid/wwwroot/companies/NVIDIA.png b/samples/FinanceGrid/wwwroot/companies/NVIDIA.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Netflix.png b/samples/FinanceGrid/wwwroot/companies/Netflix.png
diff --git a/samples/FinanceGrid/wwwroot/companies/PayPal.png b/samples/FinanceGrid/wwwroot/companies/PayPal.png
diff --git a/samples/FinanceGrid/wwwroot/companies/PepsiCo.png b/samples/FinanceGrid/wwwroot/companies/PepsiCo.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Pfizer.png b/samples/FinanceGrid/wwwroot/companies/Pfizer.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Procter.png b/samples/FinanceGrid/wwwroot/companies/Procter.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Salesforce.png b/samples/FinanceGrid/wwwroot/companies/Salesforce.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Spotify.png b/samples/FinanceGrid/wwwroot/companies/Spotify.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Starbucks.png b/samples/FinanceGrid/wwwroot/companies/Starbucks.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Tesla.png b/samples/FinanceGrid/wwwroot/companies/Tesla.png
diff --git a/samples/FinanceGrid/wwwroot/companies/The.png b/samples/FinanceGrid/wwwroot/companies/The.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Uber.png b/samples/FinanceGrid/wwwroot/companies/Uber.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Visa.png b/samples/FinanceGrid/wwwroot/companies/Visa.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Walmart.png b/samples/FinanceGrid/wwwroot/companies/Walmart.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Walt.png b/samples/FinanceGrid/wwwroot/companies/Walt.png
diff --git a/samples/FinanceGrid/wwwroot/companies/Zoom.png b/samples/FinanceGrid/wwwroot/companies/Zoom.png
diff --git a/samples/FinanceGrid/wwwroot/exampleJsInterop.js b/samples/FinanceGrid/wwwroot/exampleJsInterop.js
diff --git a/samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.js b/samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.js
@@ -0,0 +1,39 @@
+(function registerFinanceGridTemplates() {
+    if (!window.igRegisterScript || !window.igTemplating || !window.igTemplating.html) {
+        setTimeout(registerFinanceGridTemplates, 50);
+        return;
+    }
+    const html = window.igTemplating.html;
+    const icons = {
+        up: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m136-240-56-56 296-298 160 160 208-206H640v-80h240v240h-80v-104L536-320 376-480 136-240Z"/></svg>`,
+        down: html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-240v-80h104L536-526 376-366 80-664l56-56 240 240 160-160 264 264v-104h80v240H640Z"/></svg>`
+    };
+    const trend = (v) => (v >= 0 ? icons.up : icons.down);
+    const sign = (v) => (v >= 0 ? "profit" : "loss");
+
+    window.igRegisterScript("financeAssetCell", (ctx) => {
+        const name = ctx.cell.value || "";
+        const logo = "_content/FinanceGrid/companies/" + name.split(" ")[0] + ".png";
+        return html`<div class="cell-flex"><igc-avatar shape="rounded" class="asset-avatar" src="${logo}"></igc-avatar><span>${name}</span></div>`;
+    }, false);
+
+    window.igRegisterScript("financePercentCell", (ctx) => {
+        const v = ctx.cell.value || 0;
+        return html`<div class="cell-flex ${sign(v)}"><span>${(v * 100).toFixed(2)}%</span>${trend(v)}</div>`;
+    }, false);
+
+    window.igRegisterScript("financeProfitValueCell", (ctx) => {
+        const v = ctx.cell.value || 0;
+        const formatted = (v < 0 ? "-$" : "$") + Math.abs(v).toFixed(2);
+        return html`<div class="cell-flex ${sign(v)}"><span>${formatted}</span>${trend(v)}</div>`;
+    }, false);
+
+    window.igRegisterScript("financeAllocationCell", (ctx) => {
+        const pct = ((ctx.cell.value || 0) * 100).toFixed(2);
+        return html`<div class="alloc-cell"><span style="width: 42px">${pct}%</span><igc-linear-progress value="${pct}" animation-duration="0" hide-label></igc-linear-progress></div>`;
+    }, false);
+
+    window.igRegisterScript("financeHoldingPeriodCell", (ctx) => {
+        return html`<span>${ctx.cell.value} days</span>`;
+    }, false);
+})();