-
Notifications
You must be signed in to change notification settings - Fork 0
Addressing PR comments #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
c37c489
Initial plan
Copilot 0c2ac64
Add package.json and node_modules with Ignite UI web components
Copilot 8979c21
Add .gitignore and remove node_modules/obj from git
Copilot c058c4e
Implement Finance Grid example with Ignite UI web components
Copilot 7ddf8e2
Complete working Finance Grid with live data updates
Copilot c3eed49
Address code review feedback - fix file path handling and remove unus…
Copilot 084101e
Replace custom HTML table with IgbGrid from IgniteUI.Blazor.Trial pac…
Copilot 76748ad
Add documentation comment for MarkForCheck method
Copilot 86e24d2
Fix grid theme import - use correct static assets path for IgniteUI.B…
Copilot 3d9cc99
Restructure solution into separate sample projects - Part 1: Create s…
Copilot a45811b
Add main navigation project with horizontal tabs and iframe hosting
Copilot 574ce80
Convert sample projects to Razor Class Libraries - Part 1: FinanceGri…
Copilot 569b443
Use Infragistics data endpoint instead of local JSON files
Copilot 9d8fa0a
Fix JSON deserialization by adding JsonPropertyName attributes to mat…
Copilot ce74bea
Fix deserialization error by changing positions field type from int t…
Copilot 6283c2f
Fix grid not showing by adding interactive render mode and RCL assemb…
Copilot b17e85e
Convert standalone FinanceGrid project to use FinanceGrid.Library RCL
Copilot 5ccfadb
chore: add solution file for FinanceGrid project
dkamburov b59fcc6
Fix Router component error in standalone FinanceGrid project
Copilot dd619bf
Update tab navigation to match Angular grid examples design
Copilot a137d20
Remove sidebar navigation to match Angular grid examples horizontal-o…
Copilot 3e90be3
Implement remaining 4 sample projects with RCL architecture
Copilot b8912e2
docs: Update README to reflect all 5 samples are implemented
Copilot aca548c
fix: Address code review feedback
Copilot 2b1f9d4
fix: Update launchSettings.json schema URLs to use HTTPS
Copilot 2c95056
Fix Router component error in all standalone projects (SalesGrid, HRP…
Copilot b64a434
fix: add sln files for sample projects and fix the data urls
dkamburov 70fd4a6
Remove Blazor template files and clean default styles across all proj…
Copilot 2ac6577
refactor: Refactored app layout and styling
dkamburov 354f80f
Update src/BlazorGridExamples/Components/Layout/TabNavigation.razor
dkamburov 7c86c9b
Update src/BlazorGridExamples/Program.cs
dkamburov 8d82479
Update README.md
dkamburov fa27886
fix: Remove default button styles from tab navigation to match Angula…
Claude 5c46592
fix: Update header design to match Angular grid examples with light g…
Claude 39b0434
Update global styles, tab markup, and Blazor render mode
dkamburov cdd2b27
Switch to Material theme, update buttons to IgbButton
dkamburov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| # Build results | ||
| [Dd]ebug/ | ||
| [Dd]ebugPublic/ | ||
| [Rr]elease/ | ||
| [Rr]eleases/ | ||
| x64/ | ||
| x86/ | ||
| [Ww][Ii][Nn]32/ | ||
| [Aa][Rr][Mm]/ | ||
| [Aa][Rr][Mm]64/ | ||
| bld/ | ||
| [Bb]in/ | ||
| [Oo]bj/ | ||
| [Ll]og/ | ||
| [Ll]ogs/ | ||
|
|
||
| # .NET user-specific files | ||
| *.rsuser | ||
| *.suo | ||
| *.user | ||
| *.userosscache | ||
| *.sln.docstates | ||
|
|
||
| # Node modules | ||
| node_modules/ | ||
| npm-debug.log | ||
|
|
||
| # Visual Studio cache/options | ||
| .vs/ | ||
| .vscode/ | ||
|
|
||
| # JetBrains Rider | ||
| .idea/ | ||
| *.sln.iml | ||
|
|
||
| # Publish profiles | ||
| *.Publish.xml | ||
| *.pubxml | ||
| *.PublishSettings | ||
|
|
||
| # NuGet packages | ||
| *.nupkg | ||
| *.snupkg | ||
| **/packages/* | ||
|
|
||
| # Temp files | ||
| *.tmp | ||
| *.temp | ||
| *.bak | ||
| *.swp | ||
| *~ | ||
|
|
||
| # OS files | ||
| .DS_Store | ||
| Thumbs.db |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <Solution> | ||
| <Folder Name="/src/"> | ||
| <Project Path="src/BlazorGridExamples/BlazorGridExamples.csproj" /> | ||
| </Folder> | ||
| <Folder Name="/src/samples/"> | ||
| <Project Path="src/samples/ERPInventory.Library/ERPInventory.Library.csproj" /> | ||
| <Project Path="src/samples/ERPInventory/ERPInventory.csproj" /> | ||
| <Project Path="src/samples/FinanceGrid.Library/FinanceGrid.Library.csproj" /> | ||
| <Project Path="src/samples/FinanceGrid/FinanceGrid.csproj" /> | ||
| <Project Path="src/samples/FleetManagement.Library/FleetManagement.Library.csproj" /> | ||
| <Project Path="src/samples/FleetManagement/FleetManagement.csproj" /> | ||
| <Project Path="src/samples/HRPortal.Library/HRPortal.Library.csproj" /> | ||
| <Project Path="src/samples/HRPortal/HRPortal.csproj" /> | ||
| <Project Path="src/samples/SalesGrid.Library/SalesGrid.Library.csproj" /> | ||
| <Project Path="src/samples/SalesGrid/SalesGrid.csproj" /> | ||
| </Folder> | ||
| </Solution> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,226 @@ | ||
| # blazor-grid-examples | ||
| Discover five Blazor examples created with Ignite UI for Blazor. Explore advanced data grids and high-performance charts, see real implementations, and learn best practices you can apply to your own apps. | ||
| # Blazor Grid Examples | ||
|
|
||
| Discover Blazor examples created with Ignite UI for Blazor. Explore advanced data grids, see real implementations, and learn best practices you can apply to your own apps. | ||
|
|
||
| ## Repository Structure | ||
|
|
||
| ``` | ||
| blazor-grid-examples/ | ||
| ├── BlazorGridExamples.slnx # Solution file | ||
| ├── src/ | ||
| │ ├── BlazorGridExamples/ # Main navigation/landing application | ||
| │ └── samples/ # Individual sample projects | ||
| │ ├── FinanceGrid/ # Financial Portfolio sample | ||
| │ ├── SalesGrid/ # Sales Dashboard sample | ||
| │ ├── HRPortal/ # HR Portal sample | ||
| │ ├── ERPInventory/ # ERP/Inventory sample | ||
| │ └── FleetManagement/ # Fleet Management sample | ||
| └── README.md | ||
| ``` | ||
|
|
||
| ## Getting Started | ||
|
|
||
| ### Prerequisites | ||
| - .NET 8.0 SDK or later | ||
| - A code editor (Visual Studio, VS Code, or Rider) | ||
|
|
||
| ### Running All Samples | ||
|
|
||
| To run all samples together with the navigation application: | ||
|
|
||
| 1. Clone the repository: | ||
| ```bash | ||
| git clone https://github.com/IgniteUI/blazor-grid-examples.git | ||
| cd blazor-grid-examples | ||
| ``` | ||
|
|
||
| 2. Start each sample project in separate terminals: | ||
|
|
||
| **Terminal 1 - Main Navigation (Port 5000):** | ||
| ```bash | ||
| cd src/BlazorGridExamples | ||
| dotnet run | ||
| ``` | ||
|
|
||
| **Terminal 2 - Finance Grid (Port 5001):** | ||
| ```bash | ||
| cd src/samples/FinanceGrid | ||
| dotnet run | ||
| ``` | ||
|
|
||
| **Terminal 3 - Sales Grid (Port 5002):** | ||
| ```bash | ||
| cd src/samples/SalesGrid | ||
| dotnet run | ||
| ``` | ||
|
|
||
| **Terminal 4 - HR Portal (Port 5003):** | ||
| ```bash | ||
| cd src/samples/HRPortal | ||
| dotnet run | ||
| ``` | ||
|
|
||
| **Terminal 5 - ERP/Inventory (Port 5004):** | ||
| ```bash | ||
| cd src/samples/ERPInventory | ||
| dotnet run | ||
| ``` | ||
|
|
||
| **Terminal 6 - Fleet Management (Port 5005):** | ||
| ```bash | ||
| cd src/samples/FleetManagement | ||
| dotnet run | ||
| ``` | ||
|
|
||
| 3. Open your browser and navigate to `http://localhost:5000` | ||
|
|
||
| ### Running Individual Samples | ||
|
|
||
| Each sample can be run independently: | ||
|
|
||
| ```bash | ||
| cd src/samples/FinanceGrid | ||
| dotnet run | ||
| ``` | ||
|
|
||
| Then navigate to `http://localhost:5001` (or the appropriate port for your sample). | ||
|
|
||
| ## Available Samples | ||
|
|
||
| ### 1. Financial Portfolio | ||
| **Port:** 5001 | **Status:** ✅ Implemented | ||
|
|
||
| A Blazor example displaying a financial portfolio with live market data simulation. Features: | ||
| - IgbGrid component with 8 columns | ||
| - Real-time price updates every 3 seconds | ||
| - Color-coded profit/loss indicators | ||
| - Sortable and filterable columns | ||
| - Currency and percentage formatting | ||
| - Uses Infragistics data endpoint: https://www.infragistics.com/grid-examples-data/data/finance/finance.json | ||
|
|
||
| **Technologies:** IgbGrid, IgniteUI.Blazor.Trial, Blazor Server | ||
|
|
||
| ### 2. Sales Dashboard | ||
| **Port:** 5002 | **Status:** ✅ Implemented | ||
|
|
||
| A Blazor example displaying sales data with live updates. Features: | ||
| - IgbGrid component with 10 columns (Product, Sales Person, Amount, Value, Discount, Profit, Status, Region, Date) | ||
| - Real-time data updates every 3 seconds | ||
| - Sortable and filterable columns | ||
| - Currency and percentage formatting | ||
| - Uses Infragistics data endpoint: https://www.infragistics.com/grid-examples-data/data/sales/sales.json | ||
|
|
||
| **Technologies:** IgbGrid, IgniteUI.Blazor.Trial, Blazor Server | ||
|
|
||
| ### 3. HR Portal | ||
| **Port:** 5003 | **Status:** ✅ Implemented | ||
|
|
||
| Example featuring employee information management with live performance tracking. Features: | ||
| - IgbGrid component with 10 columns (Name, Title, Department, Salary, Hire Date, Status, Manager, Location, Performance) | ||
| - Real-time performance score updates | ||
| - Sortable and filterable columns | ||
| - Date and number formatting | ||
| - Uses Infragistics data endpoint: https://www.infragistics.com/grid-examples-data/data/hr/hr.json | ||
|
|
||
| **Technologies:** IgbGrid, IgniteUI.Blazor.Trial, Blazor Server | ||
|
|
||
| ### 4. ERP/Inventory | ||
| **Port:** 5004 | **Status:** ✅ Implemented | ||
|
|
||
| Sample app for ERP/Inventory handling with real-time stock level monitoring. Features: | ||
| - IgbGrid component with 10 columns (Product Name, Category, SKU, Quantity, Unit Price, Total Value, Supplier, Warehouse, Status) | ||
| - Real-time quantity updates | ||
| - Automatic total value calculations | ||
| - Sortable and filterable columns | ||
| - Uses Infragistics data endpoint: https://www.infragistics.com/grid-examples-data/data/inventory/inventory.json | ||
|
|
||
| **Technologies:** IgbGrid, IgniteUI.Blazor.Trial, Blazor Server | ||
|
|
||
| ### 5. Fleet Management | ||
| **Port:** 5005 | **Status:** ✅ Implemented | ||
|
|
||
| Sample app for managing vehicle fleet with real-time tracking. Features: | ||
| - IgbGrid component with 10 columns (Vehicle ID, Make, Model, Year, Mileage, Fuel Level, Status, Driver, Location) | ||
| - Real-time mileage and fuel level updates | ||
| - Sortable and filterable columns | ||
| - Date and number formatting | ||
| - Uses Infragistics data endpoint: https://www.infragistics.com/grid-examples-data/data/fleet/fleet.json | ||
|
|
||
| **Technologies:** IgbGrid, IgniteUI.Blazor.Trial, Blazor Server | ||
|
|
||
| ## Project Architecture | ||
|
|
||
| ### RCL (Razor Class Library) Architecture | ||
| Each sample follows a modular RCL architecture pattern: | ||
|
|
||
| **Library Projects (RCL):** | ||
| - `{SampleName}.Library/` - Reusable Razor Class Library containing: | ||
| - `Models/` - Data models with JsonPropertyName attributes | ||
| - `Services/` - HttpClient-based data services with live update logic | ||
| - `{SampleName}Component.razor` - Main grid component | ||
| - Dependencies: IgniteUI.Blazor.Trial, Microsoft.AspNetCore.Components.Web | ||
|
|
||
| **Standalone Projects:** | ||
| - `{SampleName}/` - Blazor Server application that: | ||
| - References the RCL | ||
| - Registers services and HttpClient | ||
| - Hosts the component on the home page | ||
| - Can be run independently or downloaded | ||
|
|
||
| **Benefits:** | ||
| - Component reusability across projects | ||
| - Clean separation of concerns | ||
| - Easy distribution and deployment | ||
| - Independent testing and development | ||
|
|
||
| ### Main Navigation Application | ||
| The main application (`src/BlazorGridExamples`) currently provides: | ||
| - Horizontal tab navigation matching Angular examples | ||
| - Sample information display | ||
| - Theme/Mode switcher | ||
|
|
||
| Planned enhancements (not yet implemented in the UI): | ||
| - Download button for each sample | ||
| - Fullscreen toggle | ||
| - iframe-based hosting of sample applications | ||
|
|
||
| ### Sample Projects | ||
| Each sample is a standalone Blazor Server project that can be: | ||
| - Run independently | ||
| - Modified without affecting other samples | ||
| - Deployed separately | ||
|
|
||
| ## Download Samples | ||
|
|
||
| Support for downloading individual samples directly from the navigation application is planned but not yet implemented. For now, you can clone this repository and run each sample project from the `src/samples` folder. | ||
|
|
||
| ## Technology Stack | ||
|
|
||
| - **Blazor Server** - .NET 8.0 | ||
| - **IgniteUI.Blazor.Trial** - v25.2.38 | ||
| - **Bootstrap 5** - UI Framework | ||
| - **C#** - Backend logic and services | ||
|
|
||
| ## Data Sources | ||
|
|
||
| All samples use the same data endpoints as the Angular grid examples from https://www.infragistics.com/grid-examples-data. This ensures consistency between Blazor and Angular implementations. | ||
|
|
||
| Data endpoints: | ||
| - Finance: https://www.infragistics.com/grid-examples-data/data/finance/finance.json | ||
| - Sales: https://www.infragistics.com/grid-examples-data/data/sales/sales.json | ||
| - HR: https://www.infragistics.com/grid-examples-data/data/hr/hr.json | ||
| - Inventory: https://www.infragistics.com/grid-examples-data/data/inventory/inventory.json | ||
| - Fleet: https://www.infragistics.com/grid-examples-data/data/fleet/fleet.json | ||
|
|
||
| ## License | ||
|
|
||
| This project is licensed under the MIT License. | ||
|
|
||
| ## Related Projects | ||
|
|
||
| - [Angular Grid Examples](https://github.com/IgniteUI/angular-grid-examples) - The Angular version this project mirrors | ||
| - [Ignite UI for Blazor](https://www.infragistics.com/products/ignite-ui-blazor) - Official Ignite UI Blazor components | ||
|
|
||
| ## Note | ||
|
|
||
| This project uses `IgniteUI.Blazor.Trial` package which includes trial watermark overlay. Commercial license required for production use. | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.Web"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>net8.0</TargetFramework> | ||
| <Nullable>enable</Nullable> | ||
| <ImplicitUsings>enable</ImplicitUsings> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="IgniteUI.Blazor.Trial" Version="25.2.38" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <ProjectReference Include="..\samples\FinanceGrid.Library\FinanceGrid.Library.csproj" /> | ||
| <ProjectReference Include="..\samples\SalesGrid.Library\SalesGrid.Library.csproj" /> | ||
| <ProjectReference Include="..\samples\HRPortal.Library\HRPortal.Library.csproj" /> | ||
| <ProjectReference Include="..\samples\ERPInventory.Library\ERPInventory.Library.csproj" /> | ||
| <ProjectReference Include="..\samples\FleetManagement.Library\FleetManagement.Library.csproj" /> | ||
| </ItemGroup> | ||
|
|
||
| </Project> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <base href="/" /> | ||
| <link rel="icon" type="image/png" href="favicon.png" /> | ||
| <link href="styles/app.css" rel="stylesheet" /> | ||
| <link href="_content/IgniteUI.Blazor/themes/grid/light/material.css" rel="stylesheet" /> | ||
| <HeadOutlet /> | ||
| </head> | ||
|
|
||
| <body class="ig-typography ig-scrollbar"> | ||
| <Routes /> | ||
| <script src="_framework/blazor.web.js"></script> | ||
| <script src="_content/IgniteUI.Blazor/app.bundle.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <div class="page"> | ||
| <main> | ||
| @Body | ||
| </main> | ||
| </div> | ||
|
|
||
| <div id="blazor-error-ui"> | ||
| An unhandled error has occurred. | ||
| <a href="" class="reload">Reload</a> | ||
| <a class="dismiss">🗙</a> | ||
| </div> |
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.