Blazor Grid Examples

A comprehensive showcase of data grid implementations using IgniteUI for Blazor across multiple business domains. This application demonstrates best practices for building interactive, feature-rich grids in ASP.NET Core Blazor WebAssembly.

🚀 Features

• Multiple Grid Examples - Real-world scenarios across different business domains:

  • HR Portal - Employee management and data visualization
  • ERP Inventory - Inventory management and tracking
  • Finance Grid - Financial data and reporting
  • Fleet Management - Vehicle and fleet tracking
  • Sales Grid - Sales performance and metrics

• IgniteUI Components - Enterprise-grade grid controls with:

  • Sorting and filtering
  • Paging and virtualization
  • Column customization
  • Data binding
  • Responsive design

• Modular Architecture - Separate project modules for each business domain with dedicated services

🛠️ Technology Stack

• .NET 10.0 - Latest .NET framework
• Blazor WebAssembly - Client-side web framework
• IgniteUI for Blazor v25.2.104 - Professional UI components
• C# 13 - Modern language features with nullable reference types

📁 Project Structure

├── Pages/                          # Razor page components
│   ├── SalesGrid.razor            # Sales grid example
│   ├── HRPortal.razor             # HR portal example
│   ├── FinanceGrid.razor          # Finance grid example
│   ├── FleetManagement.razor      # Fleet management example
│   ├── ERPInventory.razor         # ERP inventory example
│   └── Sample*.razor              # Sample implementations
├── Layout/                         # Layout components
│   ├── MainLayout.razor           # Main application layout
│   ├── NavMenu.razor              # Navigation menu
│   └── SampleLayout.razor         # Alternative layout
├── wwwroot/                       # Static assets
│   ├── index.html                 # Main HTML entry point
│   ├── css/                       # Stylesheets
│   └── lib/                       # Client libraries
├── Properties/                    # Application settings
│   └── launchSettings.json        # Launch configuration
├── App.razor                      # Root component
├── Program.cs                     # Application entry point
└── BlazorGridExamples.csproj     # Project configuration

🔧 Getting Started

Prerequisites

• .NET 10 SDK or later
• Visual Studio 2022 / VS Code with C# Dev Kit

Installation

1. Clone the repository

   git clone <repository-url>
   cd blazor-grid-examples

2. Restore dependencies

   dotnet restore

3. Run the application

   dotnet run

4. Open in browser

   • Navigate to https://localhost:7202 (or http://localhost:5226, or the port shown in the terminal)

📱 Available Examples

Page	Route	Description
Sales Grid	/sales-grid	Sales performance and metrics visualization
HR Portal	/ and /hr-portal	Employee management and HR data
Finance Grid	/finance-grid	Financial reporting and analysis
Fleet Management	/fleet-management	Vehicle fleet tracking and management
ERP Inventory	/erp-inventory	Inventory management and tracking

Standalone Samples

Each example is also available as a standalone view without the navigation menu. These are useful for embedding or demonstrating the grids in isolation:

Sample Route	Component
/sample/hr-portal	HR Portal standalone
/sample/erp-inventory	ERP Inventory standalone
/sample/sales-grid	Sales Grid standalone
/sample/finance-grid	Finance Grid standalone
/sample/fleet-management	Fleet Management standalone

Use the SampleLayout.razor for these standalone pages to hide the navigation and focus on the grid component.

🏗️ Architecture

The application follows a modular architecture with separate projects for each business domain:

• BlazorGridExamples - Main host application
• HRPortal - HR module with HRService
• ERPInventory - Inventory module with InventoryService
• FinanceGrid - Finance module with FinancialService
• FleetManagement - Fleet module with FleetService
• SalesGrid - Sales module with SalesService

Each module includes:

• Razor components for UI
• Services for data management
• Domain-specific models

🔌 Dependency Injection

Services are registered in Program.cs and available throughout the application:

builder.Services.AddScoped<HRService>();
builder.Services.AddScoped<InventoryService>();
builder.Services.AddScoped<FinancialService>();
builder.Services.AddScoped<FleetService>();
builder.Services.AddScoped<SalesService>();

📦 NuGet Dependencies

• IgniteUI.Blazor (v25.2.104) - Professional UI components
• Microsoft.AspNetCore.Components.WebAssembly (v10.0.8)
• Microsoft.AspNetCore.Components.WebAssembly.DevServer (v10.0.8)

🎨 Styling

The application includes:

• Bootstrap for responsive layout
• Custom CSS in wwwroot/css/app.css
• Layout-specific styles in Layout/ directory
• IgniteUI theme integration

🚦 Build & Development

Build the project

dotnet build

Run in development mode

dotnet run

Publish for production

dotnet publish -c Release

📚 IgniteUI Documentation

For more information on IgniteUI Blazor components, visit:

• IgniteUI for Blazor Documentation
• Component API Reference

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📧 Support

For issues, questions, or suggestions, please open an issue in the repository.

---

Last Updated: June 2026
Framework: .NET 10
UI Framework: IgniteUI for Blazor v25.2.104